原创 移動端關於video標籤視頻全屏播放的兼容適配問題
之前做一個項目，需要在兩個大屏之間加一屏的視頻，效果類似三屏豎方向的翻頁，只是中間是一個視頻，本以爲如此簡單三兩下搞定。沒想到。。。 原因在於，IOS與Android對video標籤的支持不同，在IOS運行的好好的，放到Android中就
2020-06-07 05:44:45
原创 前端如何製作出透明背景視頻
近期項目需求做一個透明背景的視頻疊加攝像頭的交互，於是去了解了一下透明背景視頻的實現方法。 1、webm視頻格式 首先想到的當然是先跟動畫大哥交流能否製作出透明背景的視頻，給出的答案是webm格式的視頻是可以背景透明的，OK，拿到視頻，放
2020-05-17 05:34:19
10
原创 新手入門級搭建服務器
前段時間突然想用nodejs自己寫點簡單的後臺，比如說微信授權，或者記錄一些簡單的數據之類的。就想着自己搭一個服務器，原以爲買來，把前端代碼一上傳就能訪問我的網頁了。該走的彎路果然是要走的。 首先，我在阿里雲買了個包月的服務器ECS，去你
2020-02-22 10:35:47
原创 解決移動端輸入法鍵盤隱藏時頁面拉不下來問題。
只需要監聽input的blur事件，具體代碼如下： onBlur() { document.body.scrollTop = 0 }
2019-09-16 23:05:02
原创 字符串的一些用法總結
1. 兩個用於訪問字符串中特定字符 charAt() 和 charCodeAt() 兩者都只有一個參數，不同的是前者返回字符，後者返回字符的字符編碼。 var stringValue = "hello world"; conso
2019-02-16 16:38:52
原创 移動端關於video標籤視屏全屏播放的兼容適配問題
之前做一個項目，需要在兩個大屏之間加一屏的視頻，效果類似三屏豎方向的翻頁，只是中間是一個視頻，本以爲如此簡單三兩下搞定。沒想到。。。 原因在於，IOS與Android對video標籤的支持不同，在IOS運行的好好的，放到Android中就
2019-02-16 16:38:52
原创 JS基礎篇，持續更新。。。
一、基礎知識 1. 數據類型 js 中的數據類型包含兩部分： 1）基本數據類型（String、Number、Boolean、Null、Undefined、Symbol） 2）複雜數據類型（Object） 2. typeof 的作用
2019-02-14 21:51:29
原创 webpack構建技巧之生產篇
本文接前篇 webpack構建技巧之開發篇，但可獨立使用。 項目目錄： 一、入口 入口與開發篇相同 function resolve(dir) { return path.join(__dirname, '..', dir) //
2019-01-25 21:54:32
原创 webpack構建技巧之開發篇
寫本文的目的是記錄自己摸索webpack自動構建的過程，有時候我們需要開發一些比較簡單的頁面的時候，用框架的構建工具有點太 ‘小題大做’，同時也會增加不必要的內存，所以需要一套自己的構建工具，gulp更加強調開發規範，而webpack注重
2019-01-21 20:56:38
原创 css精靈圖寫序列幀動畫
最近寫一個H5要求序列幀動畫比較多，但是卻僅僅是作爲裝飾，而不對其進行操作，爲了減小內存以及更好的性能選擇了css動畫+css精靈圖的方式。 1.找工具製作css精靈圖。 聽說Win系統的css sprite很好用，可惜
2019-01-16 21:27:34
原创 教你搭一個簡單的前後端交互小網站
最近想自己搭一個網站，但僅僅會前端還是有點做不到實際情況中的前後端交互，就自己瞎鼓搗了幾個工具，來搭一個簡單的網站。 工具： 後端處理這種自己做的小網站用 Node是最好不過來（其他語言不會。。），選Express跟Koa
2018-10-27 06:44:21
原创 iOS與微信端播放音樂問題
iOS不支持auido標籤自動播放autoplay屬性，我們需要所以我們需要在js中給audio標籤‘手 動’播放： <audio src='xxx.mp3' autoPlay loop preload="auto" muted id=
2018-10-27 06:44:21
原创 移動端轉屏事件
移動端H5經常遇到轉屏後佈局變亂，爲避免遇到這種情況通常會提醒用戶使用哪種方式的屏幕更好，或者禁止屏幕轉動。 爲此需要監聽屏幕的轉動事件 //監聽窗口轉動事件 window.addEventListener('orientationch
2018-10-10 06:11:37
原创 移動端阻止長按文字出現選中效果
移動端有時候會需要長按保存圖片，但當頁面中有文字時，長按會出現選中文字時的框，用戶會感覺很奇怪。 禁止目標文字被選中 //在需要禁止選中的文字所在位置加上以下css樣式 .txt { -webkit-touch-callout:
2018-10-10 06:11:36
原创 阻止input輸入文字時頁面視圖放大
在頁面head中加入 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,us
2018-09-12 14:40:28