原创 使用nginx搭建https服務 原
緣由：訪問一些國外網站經常比較卡甚至打不開，往往是因爲google的cdn被牆，所以打算利用nginx做個本地鏡像。 第一步：修改本機hosts，例如加入127.0.0.1 ajax.googleapis.com。 第二步：下載並安裝ngi
2018-12-02 21:26:46
原创 css3倒計時 原
倒計時很常見，完全不用js是不行的，這裏想說的只是針對毫秒的純css倒計時效果。 http://sandbox.runjs.cn/show/duazbiss 演示如上。最後一個數值位，不斷的從0~9循環，這是一個純css3動畫，通過修改
2018-12-02 21:26:45
原创 二維碼彈出疊加效果 原
主要是利用mouseover事件，進行元素和邊界判定，從而自動彈出或隱藏二維碼。 HTML結構如下： <ul class="tuijian"> <li> <img src="abc.jpg"> <div cl
2018-12-02 21:26:45
原创 網頁從右至左滑出效果 原
本質上是一個獨立層（DIV或SECTION等），初始向右對齊，寬度爲0，完全打開時變爲100%。因此需要定義兩個css類。 （初始）關閉狀態： .i-page-slide { position: absolute; top:
2018-12-02 21:26:45
3
原创 H5指北針（基於deviceorientation） 原
H5裏有個deviceorientation API，可以檢測移動設備的旋轉狀態，進而可以實現指南針的功能，只不過是以北方爲基準的。 該API提供提供了三項數據，alpha（設備Z軸旋轉角度），beta（X軸），gamma（Y軸），一般al
2018-12-02 21:26:45
21
原创 CSS層疊上下文與BFC 原
CSS中的層疊上下文和BFC是兩個很虛但極其重要的概念，影響到網頁佈局的方方面面。有幾篇博文講得很詳細，這裏稍加摘錄，便於記憶。 CSS層疊上下文 張鑫旭在深入理解CSS中的層疊上下文和層疊順序裏有深入的講解： 可以創建層疊上下文的規
2018-12-02 21:26:45
原创 DOM元素四向拖動的基本實現 原
一般彈框都是固定居中（或頂部、底部）顯示的，最近碰到了這樣的考題，覺得有趣，所以記錄下來。 首先，假定我們拖動一個藍色的方塊： #box { position: absolute; width: 100px; hei
2018-12-02 21:26:45
原创 JS圖片平滑輪播（支持正序和反序） 原
圖片輪播是一個很常見的功能，html結構大體如下： <div class="image-swiper"> <ul> <li><img src="xxx" alt="xxx" /></li> <li><img src="y
2018-12-02 21:26:45
4
原创 React Native 摺疊功能的實現及安卓踩坑筆記 原
市面上有相應的插件 react-native-collapsible， 但它在摺疊狀態底部有莫名其妙的空白，且有很多bug未解決， 於是自己試着實現了一個簡版。 基礎結構 <View style={S.container}> <Vi
2018-12-02 21:26:45
1
原创 iview-admin IE兼容方案（已棄坑） 原
iview admin 是基於 iview 的一套後臺管理系統，界面清爽，功能比較完整，很適合快速上手。不過它未兼容IE（非Edge）9/10，而本該可以部分支持的。這裏提供一些解決方案。 一、const polyfill 本人是通過v
2018-12-02 21:26:45
1
原创 純JS檢測身份證合法性 原
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <ti
2018-12-02 21:26:45
原创 導航欄續之自動切換樓層 原
滾屏時自動高亮當前樓層對應的tab 這個其實很簡單，就是偵聽scroll事件，然後依據滾動高度和各樓層的offset top值，計算出與當前樓層最接近的那個樓層，最後高亮相應tab即可。 var top = $win.scrollTop()
2018-12-02 21:26:45
原创 居民身份證號碼的奧祕及身份證第18位（校驗碼）的計算方法 轉
居民身份證是國家法定的證明公民個人身份的證件。爲了堵塞和制止假居民身份證的流通和使用，在查驗和核查居民身份證時可掌握以下幾個要點： 一、居民身份證有效期限與持證人年齡、簽發日期的關係 居民身份證的有效期限分爲10年、20年、長期三種
2018-12-02 21:26:45
原创 小程序踩坑筆記 原
用過了IDE，再看wepyjs，才發現後者的強大。 當然，預覽和調試還是需要IDE的，所以wepyjs的作用就是提高開發效率。 一、使用PostCSS 前段時間wepy還沒有正式支持postcss，但相關插件已經在開發了，通過查看源碼編譯成
2018-12-02 21:26:45
原创 Sublime Text通過快捷鍵在瀏覽器中預覽文件 原
首先說下，我的是Sublime Text 3，win10。 ST有個插件View In Browser可以在瀏覽器裏打開文件，但經過試用，報Encoding錯誤，其Github的issues裏也有人提出了此bug，但未解決。然後我就找到了這
2018-12-02 21:26:45