用Jquery做一个进度条
欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接：https://www.abboke.com/rz/2019/1010/116816.html
本来打算写一个Jquery插件的，不过我看了看网上插件的教程，感觉都不怎么样。国外有一本书叫《jQuery Plugin Development Beginner’s Guide》，写的不错(作者之一是一位复旦毕业的华裔，所以可能语言和思维方式我们更好理解)。没有中文版。就我英语水平来估计，要看一个月……只能慢慢来了。
为什么我想自己做一个进度条，我是看了网上很多进度条的插件感觉不满意，才想自己做一个。又忍不住吐槽网上那些垃圾网站了，看十篇有八篇讲的是一样的，其中又有一半copy的不完整。而且这篇文章说到的插件官网已经不存在了，所以我并没有找到它。
于是，开始自己动手丰衣足食。
演示：https://jsfiddle.net/noiping/p4hd7n7f/
0x01 做一个简单的样式
我这个进度条很简单，不用图片也不用flash。就是使用javascript和css。
首先当然载入Jquery。我这里还用到一个插件：“圆角插件”。很简单使用，在我们需要其圆角的div上，使用corner方法即可，这里不是重点，我就不多说了。
我们的样式如下：
brush: html;auto-links: false;"><html><head><title>进度条演示页面</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">body {width: 100%;background-color: #CCC;}#processbar {height: 13px;width: 30%;margin-top: 200px;margin-left: 35%;background-color: #fff;border: 1px solid #999;}#processbar .finish {height: 13px;width: 40%;background-color: #999;}</style><script src="js/jquery-1.7.1.js" type="text/javascript"></script><script src="js/jquery.corner.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){$("#processbar").corner();$("#processbar .finish").corner();})</script></head><body> <div id="processbar"> <div>finish"></div> </div></body></html> 大家可以自己试试，样式大概如下：（低版本IE下可能会出问题，IE的兼容性大家自己研究） 
这两行大家可以看到
brush: html;auto-links: false;"> <div id="processbar"> <div>finish"></div> </div>其实就是定义了一个div，背景是白色，作为进度条背景。其中又是一个div，作为进度条，背景颜色是#999.
我们之后Jquery的目的就是动态改变进度条宽度，让他慢慢填充背景，最后达到100%。
0x02 setInterval函数的使用
该函数是一个和时间有关的函数。函数原型：
var timer = setInterval(codes, interval);
作用是每隔interval毫秒，执行一次codes。返回一个time对象。
这个函数很好使用，codes就填入一个函数，interval就填入相隔的时间就行。
另一个函数，clearInterval，作用是清除setInterval函数的执行。我们做一个进度条，总有到头的时候。当100%时，就用该函数清除定时器。
clearInterval函数有一个参数，是之前setInterval返回的那个time对象。
0x03 开始运行
brush: js;auto-links: false;">var i = 0;var timer = setInterval(function(){$("#processbar .finish").css("width", i + "%");i++;if (i > 100) {clearInterval(timer);}}, 10); 看以上代码。我们用i来表示当前进度，首先设置一个10毫秒执行一次的定时器。每次执行，调用css方法，改变finish这个div的宽度。之后i自增。直到i > 100的时候，停止定时器。
于是，就完成了我们之前的效果：https://jsfiddle.net/noiping/p4hd7n7f/
