进度条在windows系统中非常常见，像常见的软件安装部署等。它能够提示用户系统正在运行而不是被卡死，从而避免了用户错误操作，提高了用户体验。在web中，我们可能也会遇到前台和服务器交换大量数据，这时候我们就需要给用户一个良好的提示。如在一些图片浏览网站，当我们点击观看下一张图片时，很多都做了一个正在加载的提示，个人觉得这些提示不仅仅能够留住浏览者，也是衡量一个网站是否真正尊重用户的标志。
当然，这些图片浏览网站，我们没有必要去告诉用户图片下载了多少，因为一个图片顶多就几M，也不会占用太多的下载时间。但是在一些特殊的情况下，用户可能需要等待的时间比较长，这时候如果能够用进度条展示当前任务的完成度是比较好的。
例如，客户端有连续100个请求需要发送到服务器，请求的数据都比较小，但是需要占用服务器比较长的计算时间，这时候我们可以通过Ajax的方式向服务器发送数据，每成功返回一次数据，就在客户端的进度条上显示1%，用户能够知道当前的状态，从而合理安排自己的时间，可以说，这样的网站，用户体验才是最好的。那么，怎么样去做呢？其实实现起来不难，ajax每次执行成功，可以调用一个回掉函数，我们可以通过回掉函数来显示这个进度条。我的代码是这样的:
<!DOCTYPE HTML>
<html>
<body>
</body>
<script>
function Processbar(w,h,bc,pc){
var w=w; //长度
var h=h; //宽度
var bordc=bc; //进度条边框
var processcolor=pc;//进度条颜色
var bar=document.createElement("div");
var process=document.createElement("div");
this.show=function(){
bar.style.width=w;
bar.style.height=h;
bar.style.border="1px solid "+bordc;
bar.style.borderRadius="5px";
process.style.width="0px";
process.style.height=h;
process.style.borderRadius="5px 0 0 5px";
process.style.background=processcolor;
bar.appendChild(process);
document.body.appendChild(bar);
}
this.process=function(s){
//参数s为速度,百分比，填10则为10%
var speed=parseInt(w)*s/100; //每次进行的实际长度
var processwidth=process.offsetWidth;//当前进度条的宽度
if(processwidth<=bar.offsetWidth-speed){
process.style.width=processwidth+speed+"px";
}else{
process.style.width=w;
process.style.borderRadius="5px"
return ;
}
}
}
var a=new Processbar("500px","30px","#ccc","red");
a.show();
setInterval(function(){
a.process(1);
},100)
</script>
</html>
在上面这个例子，创建了一个 Processbar的类，这个类一共有两个方法，show()方法用来把进度条插入到页面当中，process()方法用来使进度条的数据往上累加。它接受一个参数，用来表示每调用一次，当前进度条提示完成的百分比，如果填入1，则调用100次就能填满进度条。下面的setInterval是简单模拟请求，实际需求当中这样做的应该会比较少。点击预览