利用js编写网页进度条效果


Posted in Javascript onOctober 08, 2017

一、基本思路

为了让我们编写的网页进度条满足现有需求,又足够轻便,所以使用原生js写一个构造函数,为了见名知义,可以把该函数命名为”Loading”。该函数接收2个参数,分别为arr、callback。其中arr定义图片数组,callback定义执行完成后回调函数。该构造函数内部,遍历图片数组加载图片,每加载完一张图片,修改进度条进度,直至全部加载完成,进度条进度为100%。

二、实现步骤

(1)先搭建好进度条的样子,把html和css写好。

利用js编写网页进度条效果

利用js编写网页进度条效果

写完后预览一下进度条的效果

利用js编写网页进度条效果

(2)编写Loading构造函数。在该构造函数中,把进度条的css和html在执行进度条init方法时动态添加和渲染。至此,进度条模块已经编写好,使用时只需要引入该构造函数,并实例化一个对象。

利用js编写网页进度条效果

(3)实例化一个进度条对象

利用js编写网页进度条效果

三、改进

该组件的可扩展性稍弱,主要表现为进度条样式上,可以根据不同进度条实例来定义进度条样式。所以可以在构造函数中增加一个this.setCss方法,实现不同进度条实例的个性化。修改如下:

利用js编写网页进度条效果

如果进度条颜色为红色,不是默认的#01ffff,则在初始化前调用setCss方法。

利用js编写网页进度条效果

页面效果如下

利用js编写网页进度条效果

四、总结

该进度条插件已经开发完成,仍有很多可优化的点,比如加载进度条的动画可以更加优雅,配置样式时可以更简洁,代码的可读性等。优化无止境,同学仍需努力。

Javascript 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 #Javascript
JS动态修改网页body的背景色实例代码
Oct 07 #Javascript
JS实现简单表格排序操作示例
Oct 07 #Javascript
javascript数组定义的几种方法
Oct 06 #Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 #Javascript
node.js中http模块和url模块的简单介绍
Oct 06 #Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 #Javascript
You might like
PHP个人网站架设连环讲(二)
2006/10/09 PHP
PHP脚本数据库功能详解(下)
2006/10/09 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
JObj预览一个JS的框架
2008/03/13 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
Python如何实现动态数组
2019/11/02 Python
python IDLE添加行号显示教程
2020/04/25 Python
python文件路径操作方法总结
2020/12/21 Python
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
护理专科学生自荐书
2014/07/05 职场文书
教师个人师德总结
2015/02/06 职场文书
幼师小班个人总结
2015/02/12 职场文书
工程服务质量承诺书
2015/04/29 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
Python学习之包与模块详解
2022/03/19 Python