利用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 相关文章推荐
js获取ajax返回值代码
Apr 30 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
Vue异步加载about组件
Oct 31 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
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 DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
表格 隔行换色升级版
2009/11/07 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
详解微信小程序的 request 封装示例
2018/08/21 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
一步步解析Python斗牛游戏的概率
2016/02/12 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
对python3新增的byte类型详解
2018/12/04 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
机械设计制造专业个人求职信
2013/09/25 职场文书
银行类自荐信
2014/02/04 职场文书
学校后勤岗位职责
2014/02/19 职场文书
党建示范点实施方案
2014/03/12 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
个人求职信格式范文
2015/03/20 职场文书