原创 this的設計及綁定規則

每個函數的this是在調用時被綁定的,完全取決於函數的調用位置; 什麼是調用位置呢? 顧名思義就是“函數被調用的位置”;要去尋找被調用的位置,那麼就要分析調用棧,this的調用位置就在當前正在執行的函數的前一個調用中; 舉個例子 func

原创 閉包是什麼?

閉包的定義: 當函數可以記住並訪問所在的詞法作用域時,就產生了閉包,即使函數是在當前詞法作用域之外執行。 我們來看以下代碼, function foo() { var a = 2; function bar() {

原创 var b = 10; (function b() {b = 20; console.log(b); })();會打印什麼你瞭解嗎?

要知道打印什麼需要具備2個知識點  一、函數聲明和函數表達式的區別  二、匿名函數與具名函數的區別 首先來說說第一點: 要區分函數聲明和函數表達式,只需要知道function是不是聲明中的第一個詞,如果是,那就是函數聲明,否則就是函數表達式

原创 實現移動端上拉加載效果

畢設終於結束了,做了一個webApp,從中學習到了很多,頁面有用到上拉加載的效果。今天就整理了一下。 上拉加載的實現思路其實很簡單: 1.移動端觸發touchmove事件(上拉) 2.判斷最後一個元素是否已出現在底部 3.若出現,則js添加

原创 本地存儲localStroage的用法及示例

localStorage是HTML5在在客戶端存儲數據的新方法,存儲的數據沒有時間限制。 localStorage的主要API: localStorage.setItem(key,value);   key是保存數據的變量,value是保存

原创 網站整站開發小例子

之前學習的前端知識都只是侷限於html+js編寫的靜態網頁,所以前幾天試着加上模擬數據把前端和後臺串聯起來。在這個demo中,我運用了node.js、koa及vue.js。首先我們需要了解node.js,簡單的說 Node.js 就是運行在

原创 原生ajax與封裝的ajax使用方法

當我們不會寫後端接口來測試ajax時,我們可以使用node環境創建一個本地服務器。 1、創建一個本地服務器可參考http://www.cnblogs.com/heyujun-/p/6793900.html網站整站開發小例子,在打開命令窗口並

原创 實現移動端touch事件的橫向滑動列表效果

要實現手機端橫向滑動效果並不難,瞭解實現的原理及業務邏輯就很容易實現。原理:touchstart(手指按下瞬間獲取相對於頁面的位置)——》touchmove(手指移動多少,元素相應移動多少)。 接下來講講實現邏輯: 其實就是手指拖動列表向

原创 醫藥箱APP靜態小項目

花費了10天時間,純手寫一個醫藥箱APP靜態小項目,裏面有上拉加載、左右滑動、彈出層淡入淡出等效果,主要是練習。 以下是一部分頁面效果圖: 我用的是谷歌的開發者工具的手機端模擬器。   裏面需要優化的地方還有很多,歡迎指正! 雲盤地址:

原创 原生js製作標題與內容保持4行的效果

在製作網頁或移動端有時會用到一個效果,類似文章標題和文章描述的排列總是保持一樣的行數,要麼標題總是一行,多出的省略,要麼標題內容1:3或2:2或3:1這樣,今天練習這樣的效果。 實現的原理:給標題和內容分別加上行高,獲取標題的高度除以自身

原创 個人網站製作

最近工作不忙,花了點時間做了個簡陋的個人網站,包括pc端和移動端和後臺。結構大致如下: 爲了學習一些新技術,PC和移動端都用了不同的技術框架。 PC端的技術框架包括:React、antd組件庫、anxios 移動端的技術框架包括:Vue、

原创 自制軟鍵盤+支付密碼

在移動端支付密碼或輸入密碼時需要彈出虛擬鍵盤,有些設備在鍵盤彈出時會把文本框擋住,爲了兼容各種設備,所以需要自制軟鍵盤來替代虛擬鍵盤。 以下是我自制的一個小demo,只能順序輸入和倒序清除,或全部清空; *{ padding: 0;mar

原创 使用laravel框架與phantomjs實現截屏功能

在網上看到的關於phantomjs實現截屏功能很多都是與node結合在一起使用,並需要輸入命令才能執行。因此我想要實現輸入網址即可截屏並輸出圖片的功能。示例:http://120.77.171.182:8080/laravel&phanto

原创 webpack+vue2實現旅遊網小demo

這兩天自己練習做了一個webpack+vue2的旅遊app小項目,涉及到的內容是vue組件、vue路由以及webpack打包。           目錄文件設計: 有興趣的可到我的百度網盤下載 鏈接: http://pan.baidu.c

原创 實現移動端頂部與底部固定,內容區優化的效果

實現頂部與底部固定的效果十分容易,且很多人都會選擇用這個方式,就是頂部position:fixed,底部也position:fixed。實現的效果就像下面兩張圖,container區域是佈滿整個屏幕的,且滾動條也是滾動在整個屏幕中,調內容區