用js寫一個網頁進度條

1、基本思路

爲了讓咱們編寫的網頁進度條知足現有需求，又足夠輕便，因此使用原生js寫一個構造函數，爲了見名知義，能夠把該函數命名爲」Loading」。該函數接收2個參數，分別爲arr、callback。其中arr定義圖片數組，callback定義執行完成後回調函數。該構造函數內部，遍歷圖片數組加載圖片，每加載完一張圖片，修改進度條進度，直至所有加載完成，進度條進度爲100%。

2、實現步驟

（1）先搭建好進度條的樣子，把html和css寫好。

 

 

 

寫完後預覽一下進度條的效果

 

 

（2）編寫Loading構造函數。在該構造函數中，把進度條的css和html在執行進度條init方法時動態添加和渲染。至此，進度條模塊已經編寫好，使用時只須要引入該構造函數，並實例化一個對象。

 

 

（3）實例化一個進度條對象

 

 

3、改進

該組件的可擴展性稍弱，主要表現爲進度條樣式上，能夠根據不一樣進度條實例來定義進度條樣式。因此能夠在構造函數中增長一個this.setCss方法，實現不一樣進度條實例的個性化。修改以下：

 

 

若是進度條顏色爲紅色，不是默認的#01ffff，則在初始化前調用setCss方法。

 

 

頁面效果以下

 

 

4、總結

該進度條插件已經開發完成，仍有不少可優化的點，好比加載進度條的動畫能夠更加優雅，配置樣式時能夠更簡潔，代碼的可讀性等。優化無止境，同窗仍需努力。