當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS实现进度条
超時函數控制，每隔一秒鐘就會執行指定的超時函數，再指定的超時函數里設置進度條的標簽的長度，即可完成進度條的顯示。
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>進度條設計</title><style>#frame{overflow: hidden;width: 300px;border-radius: 50px;border:2px solid black;border-bottom-width: 4px;border-top-width: 3px;}.border{margin:15px 30px;border:2px solid black;height: 30px;overflow: hidden;position: relative;}.bar{width: 5%;height: 100%;background:pink;border-top-right-radius: 10px;border-bottom-right-radius: 10px;transition:all 0.1 ease-in-out 0s;}.percentage{position: absolute;left: 0;top: 0;width: 100%;text-align: center;padding:5px;color:#f9ec75;font-weight: bold;}</style><script>window.setTimeout('update();', 0);function update(){var frm = document.getElementById('frame');var list = document.getElementsByTagName('div');var bar;for(var i=0;i<list.length;i++){if(list[i].className == 'bar'){bar = list[i];}}if(bar.style.width == ''){bar.style.width = '6%';}else{bar.style.width = parseInt(bar.style.width)+1+'%';}bar.nextSibling.nextSibling.textContent = parseInt(bar.style.width)-5+'%';if(bar.style.width != '105%'){window.setTimeout('update();', 100);}}</script> </head> <body> <div id="frame"><div class="border"><div class="bar"></div><div class="percentage">0%</div></div> </div> </body> </html>效果圖：
代碼分析：
最內部div用戶繪制進度條，其外面的div標簽用于繪制裝載進度條的狹槽，最外部的div標簽用于繪制外殼效果。
在本程序的運行中，發現有停滯效果，這是因為JavaScript程序和CSS3的transition屬性不一致所造成的。如果希望進度條過度順利可以取消超時函數里面的超時重設，并直接將進度條設置為超過100%，并將transition屬性的變化時間設置為較長的時間即可。
總結
- 上一篇： 锤子t1android驱动,锤子T1痛失
- 下一篇： JS实现动态进度条