<style type="text/css">
*{ margin:0px auto; padding:0px;}
#wai{ width:100%; height:600px;}
#jwk{ width:200px; height:15px; margin-top:50px; border:1px solid #F00;}
#nei{ width:0px; height:15px; background-color:#F30; margin-left:0px; }
</style>
</head>
<body>
<div id="wai">
<div id="jwk">
???<div id="nei" style="width:0px;"></div>
???</div>
??<input type="button" value="开始" id="start">//插入一个开始按钮
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById("start");
var nei = document.getElementById("nei");
//设置按钮的点击事件，
btn.onclick =function(){
//每20毫秒调用一次jia（）方法；
window.setInterval("jia()",20)
}//写一个jia的方法，进度条里面的颜色每加一点
function jia(){
var nw = parseInt(nei.style.width);
if(nw<200){
nw++;
}
nei.style.width = nw+"px";
}
</script>
js应用例子——进度条
原文地址：http://www.cnblogs.com/forqiwen/p/8098100.html