利用JavaScript与CSS制作百分比进度条效果的简单实例
百分比进度条效果是比较常用的特效之一，它能让人们在等待的时间内不那么无聊，能够提供给人们信息，阿萌此次来介绍一种利用javascript+CSS实现简单的思路。
进度条的实现方法很多，此次介绍的思路是：准备两个容器，背景颜色各不相同，利用绝对定位或者相对定位等方法层叠在一起，先设置顶部容器宽度为0，然后随着进度的百分比参数改变顶部容器的宽度比例，从而制作出类似于灌水一样的进度条效果。
下面放代码，大家可以自己推敲吧，思路就是上面的思路：
CSS：
<style type="text/css">
body{margin:0px;padding:0px;}
#ibox{background:#ccc;line-height:20px;width:300px;height:20px;text-align:left;margin:0 auto;}
#itop{background:red;line-height:20px;width:0px;height:20px;color:#fff;font-size:14px;text-align:center;position:absolute;}
</style>
代码：
<script type="text/javascript">
window.onload=function(){
var itop = document.getElementById('itop');
var ibox = document.getElementById('ibox');
var timer = null;
var ispeed = 10;
timer=setInterval(function(){
var iWidth = itop.offsetWidth/ibox.offsetWidth*100;
itop.style.width = itop.offsetWidth+1+'px';
itop.innerHTML = Math.round(iWidth)+"%";
if(iWidth == 100){clearInterval(timer);}
},ispeed);
}
</script>
<div id="ibox"><div id="itop"></div></div>
