突发奇想,JavaScript模仿下载进度条效果
不定时的更新,这一次采用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{ width: 600px; height: 50px; margin: 100px auto; background-color:#ffffff; border: 0.5px solid #999999; border-radius: 1px; box-sizing: content-box; } #ch{ width: 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>
您可以: 点击这里查看效果