利用js编写网页进度条效果
更新时间：2017年10月08日 10:57:16 作者：乐莫乐兮新相知
这篇文章主要为大家详细介绍了利用js编写网页进度条效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一、基本思路
为了让我们编写的网页进度条满足现有需求，又足够轻便，所以使用原生js写一个构造函数，为了见名知义，可以把该函数命名为”Loading”。该函数接收2个参数，分别为arr、callback。其中arr定义图片数组，callback定义执行完成后回调函数。该构造函数内部，遍历图片数组加载图片，每加载完一张图片，修改进度条进度，直至全部加载完成，进度条进度为100%。
二、实现步骤
（1）先搭建好进度条的样子，把html和css写好。
写完后预览一下进度条的效果
（2）编写Loading构造函数。在该构造函数中，把进度条的css和html在执行进度条init方法时动态添加和渲染。至此，进度条模块已经编写好，使用时只需要引入该构造函数，并实例化一个对象。
（3）实例化一个进度条对象
三、改进
该组件的可扩展性稍弱，主要表现为进度条样式上，可以根据不同进度条实例来定义进度条样式。所以可以在构造函数中增加一个this.setCss方法，实现不同进度条实例的个性化。修改如下：
如果进度条颜色为红色，不是默认的#01ffff，则在初始化前调用setCss方法。
页面效果如下
四、总结
该进度条插件已经开发完成，仍有很多可优化的点，比如加载进度条的动画可以更加优雅，配置样式时可以更简洁，代码的可读性等。优化无止境，同学仍需努力。
相关文章
这篇文章主要为大家详细介绍了Bootstrap导航栏和登陆框的编写代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要为大家详细介绍了原生JS实现萤火虫效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
今天是看到UCDChina上的一篇文章文章 ，是关于SNS的用户体验问题，发觉文中提到的第一个细节，UCHOME就做的不好，于是改进了一下。2011-01-01
ECMAScript中var let const常见问题及区别详解
这篇文章主要为大家介绍了ECMAScript中var let const常见问题及区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02![TypeScript中的类型断言[as语法|＜＞语法]的使用](//img.jbzj.com/images/xgimg/bcimg4.png)
TypeScript中的类型断言[as语法|＜＞语法]的使用
本文主要介绍了TypeScript中的类型断言[as语法|＜＞语法]的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
Javascript 键盘keyCode键码值表，需要的朋友可以保存一份。2009-12-12
下面小编就为大家带来一篇javascript 广告移动特效的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
该价格表基于Bootstrap网格系统来进行布局，通过简单的CSS3代码来美化价格表，样式非常的时尚漂亮，且能在不同屏幕下展示良好的效果,需要的朋友可以参考下2017-02-02
这篇文章主要为大家详细介绍了基于Three.js实现360度全景图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
一小段代码，经常出现在面试笔试题中的：统计一个字符串中出现最多的字符的次数，可以是英文或者数字。2010-12-12
![TypeScript中的类型断言[as语法|＜＞语法]的使用](http://img.jbzj.com/images/xgimg/bcimg4.png)
最新评论