js实现动态进度条详解
本章节分享一段代码实例，它实现了动态进度条效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#main{
width: 100px;
height: 30px;
background: #ddd;
overflow: hidden;
}
#progress{
width: 1%;
height: 30px;
background: #aaf;
}
</style>
<script type="text/javascript">
window.onload=function(){
var bid=document.getElementById("bid");
var progress=document.getElementById("progress");
bid.onclick=function(){
pro=0;
speed=1;//速度
sobj=setInterval(function(){
pro+=speed;
if(pro>=50){
speed=5;//进度大于50%的时候加快速度
}
if(pro>=100){
clearInterval(sobj);
}
progress.style.width=pro+'%';
},100)
}
}
</script>
</head>
<body>
<div id="main">
<div id="progress"></div>
</div>
<button id="bid">查看演示</button>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var bid=document.getElementById("bid")，获取id属性值为bid的元素对象。
（3）.var progress=document.getElementById("progress")，获取id属性值为progress的元素对象。
（4）.bid.onclick=function(){}，为元素注册onclick事件处理函数。
（5）.pro=0,声明一个变量并赋初值为0，后面会介绍它的作用。
（6）.speed=1，声明一个变量并赋初值为1，后面会介绍它的作用。
（7）.sobj=setInterval(function(){},100)，每隔100毫秒执行一次回调函数。
（8）.pro+=speed，pro表示已经进行的百分比 。（9）.if(pro>=50){
speed=5;
},如果大于等于50，那么就将速度设置为5,也就是定时器函数没执行一次，变化的尺寸是5px。
（10）.if(pro>=100){
clearInterval(sobj);
}，如果大于等于100，那么就停止定时器函数的执行。
（11）.progress.style.width=pro+'%'，设置设置progress的宽度，也就是内部进度条的尺寸。
二.相关阅读:
（1）.setInterval()可以参阅setInterval()一章节。
（2）.clearInterval()可以参阅clearInterval()一章节。
js实现动态进度条详解，这样的场景在实际项目中还是用的比较多的，关于js实现动态进度条详解就介绍到这了。
js实现动态进度条详解属于前端实例代码，有关更多实例代码大家可以查看。