不定时的更新，这一次采用JavaScript 模仿下载进度条效果。原理：两个div嵌套，里面的宽度0，外部自己随便定义，采用 setInterval() 函数增加 里面的div 的 width的值，使其背景色慢慢平铺开来，同时增加一个计数值“index” 表示进度。采用
window.getComputedStyle()函数获取宽度.
直接show code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#fa{
600px;
height: 50px;
margin: 100px auto;
background-color:#ffffff;
border: 0.5px solid #999999;
border-radius: 1px;
box-sizing: content-box;
}
#ch{
0px;
height: 50px;
background-color: pink;
text-align: right;
color: green;
line-height: 50px;
box-sizing: content-box;
}
</style>
</head>
<body>
<div id="fa">
<div id="ch">
</div>
</div>
<script type="text/javascript">
window.onload=function () {
var ta_length=600; //fa 的宽
var ta_time=200;// 走到头的时间
var ta_min=20;// 走一步的速度
Ago(ta_length,ta_time,ta_min); //调用函数
function Ago(ta_length,ta_time,ta_min) {
var elem=document.getElementById("ch"); //获取ch
var fa=document.getElementById("fa");
var stepLength=ta_length/ta_time;
var cover=0;
var index=0;
alert("开始下载");
var step=function() {
index+=0.5;
if (cover+stepLength<=ta_length){
elem.style.width=parseFloat(getStyle(elem,'width'))+stepLength+'px'; //获取的宽度与每一步stapLength相加
elem.innerHTML=index+"%";// 计数值
cover+=stepLength; // ch的宽度增加
if (index==100){
elem.style.backgroundColor="green";//百分百后背景颜色变化
}
}
else {
fa.style.border="0px";
clearInterval(IntervalId);
elem.style.border="1px solid green";
elem.innerHTML=" ";
alert("下载完成");
}
}
var IntervalId=setInterval(step,ta_min);
}
function getStyle(elem,cssname) {
if(window.getComputedStyle){
return window.getComputedStyle(elem)[cssname] //获取ch 的宽度
}else{
return elem.currentStyle[cssname];
}
}
}
</script>
</body>
</html>
您可以： 点击这里查看效果