利用js編寫網頁進度條效果
更新時間：2017年10月08日 10:57:16 作者：樂莫樂兮新相知
這篇文章主要為大家詳細介紹了利用js編寫網頁進度條效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一、基本思路
為了讓我們編寫的網頁進度條滿足現(xiàn)有需求，又足夠輕便，所以使用原生js寫一個構造函數，為了見名知義，可以把該函數命名為”Loading”。該函數接收2個參數，分別為arr、callback。其中arr定義圖片數組，callback定義執(zhí)行完成后回調函數。該構造函數內部，遍歷圖片數組加載圖片，每加載完一張圖片，修改進度條進度，直至全部加載完成，進度條進度為100%。
二、實現(xiàn)步驟
（1）先搭建好進度條的樣子，把html和css寫好。
寫完后預覽一下進度條的效果
（2）編寫Loading構造函數。在該構造函數中，把進度條的css和html在執(zhí)行進度條init方法時動態(tài)添加和渲染。至此，進度條模塊已經編寫好，使用時只需要引入該構造函數，并實例化一個對象。
（3）實例化一個進度條對象
三、改進
該組件的可擴展性稍弱，主要表現(xiàn)為進度條樣式上，可以根據不同進度條實例來定義進度條樣式。所以可以在構造函數中增加一個this.setCss方法，實現(xiàn)不同進度條實例的個性化。修改如下：
如果進度條顏色為紅色，不是默認的#01ffff，則在初始化前調用setCss方法。
頁面效果如下
四、總結
該進度條插件已經開發(fā)完成，仍有很多可優(yōu)化的點，比如加載進度條的動畫可以更加優(yōu)雅，配置樣式時可以更簡潔，代碼的可讀性等。優(yōu)化無止境，同學仍需努力。
相關文章
這篇文章主要為大家詳細介紹了Bootstrap導航欄和登陸框的編寫代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)螢火蟲效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
今天是看到UCDChina上的一篇文章文章 ，是關于SNS的用戶體驗問題，發(fā)覺文中提到的第一個細節(jié)，UCHOME就做的不好，于是改進了一下。2011-01-01
ECMAScript中var let const常見問題及區(qū)別詳解
這篇文章主要為大家介紹了ECMAScript中var let const常見問題及區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02![TypeScript中的類型斷言[as語法|＜＞語法]的使用](http://img.jbzj.com/images/xgimg/bcimg4.png)
TypeScript中的類型斷言[as語法|＜＞語法]的使用
本文主要介紹了TypeScript中的類型斷言[as語法|＜＞語法]的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
Javascript 鍵盤keyCode鍵碼值表，需要的朋友可以保存一份。2009-12-12
下面小編就為大家?guī)硪黄猨avascript 廣告移動特效的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
基于Bootstrap漂亮簡潔的CSS3價格表(附源碼下載)
該價格表基于Bootstrap網格系統(tǒng)來進行布局，通過簡單的CSS3代碼來美化價格表，樣式非常的時尚漂亮，且能在不同屏幕下展示良好的效果,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細介紹了基于Three.js實現(xiàn)360度全景圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
一小段代碼，經常出現(xiàn)在面試筆試題中的：統(tǒng)計一個字符串中出現(xiàn)最多的字符的次數，可以是英文或者數字。2010-12-12