當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS实现简单进度条
思路：
? ? ?1.定義一個(gè)外框+內(nèi)部進(jìn)度框+顯示；
? ? ?2.定義i從0加到100；
? ? ?3.循環(huán)的i的大小作為參考修改內(nèi)部框的顏色樣式的寬度，記得加上px；
? ? ?4.顯示與循環(huán)保持一致，記得加上%；
? ? ?5.外部考慮用定時(shí)器，每0.1秒更新一個(gè)i，不然只顯示最終的‘100%’，當(dāng)i<100時(shí)，執(zhí)行2、3，否則，退出當(dāng)前進(jìn)程。
實(shí)現(xiàn)效果如下：
??
完整代碼如下：
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><style>*{margin:0;padding:0;}.box{width: 300px;height:10px;border:1px solid #9e9e9e;}.load{width:0px;height:10px;background:#325976;}</style></head><body><div style="left:10%;position:absolute;top: 20%;font-size:70px"><div class="box" id="div_box"><div class="load" id="load"></div></div><span id='result' style=""></span></div></body> <script>var n=0;var load=document.getElementById('load');var result=document.getElementById('result');var i=0;var timer=setInterval(function(){// for(i=0;i<=100;i++){// i+=1;if(i<100){i+=1;load.style.width=i*3+'px';result.innerText=i+'%';}if(i>=100){clearInterval(timer);}console.log(i)// }},100);</script> </html>在1-100循環(huán)那里，想使用for循環(huán)，在for里面用定時(shí)，每循環(huán)一次i+1且執(zhí)行一次定時(shí)，嘗試多次無果，找不出原因，哎……
最終改成了上述的i+=1，把定時(shí)放在了外層。
總結(jié)
- 上一篇： php web开发的不足之一：无法常驻内
- 下一篇： js练手小项目——JavaScript实