htmlcss百分⽐效果，利⽤JavaScript与CSS制作百分⽐进度条
效果的简单实例
百分⽐进度条效果是⽐较常⽤的特效之⼀，它能让⼈们在等待的时间内不那么⽆聊，能够提供给⼈们信息，阿萌此次来介绍⼀种利⽤javascript+CSS实现简单的思路。
进度条的实现⽅法很多，此次介绍的思路是：准备两个容器，背景颜⾊各不相同，利⽤绝对定位或者相对定位等⽅法层叠在⼀起，先设置顶部容器宽度为0，然后随着进度的百分⽐参数改变顶部容器的宽度⽐例，从⽽制作出类似于灌⽔⼀样的进度条效果。
下⾯放代码，⼤家可以⾃⼰推敲吧，思路就是上⾯的思路：
CSS：手机上可以打html与css的app
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;}
代码：
window.οnlοad=function(){
var itop = ElementById('itop');
var ibox = ElementById('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 = und(iWidth)+"%";
if(iWidth == 100){clearInterval(timer);}
},ispeed);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。