當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JS实现进度条
超時(shí)函數(shù)控制，每隔一秒鐘就會(huì)執(zhí)行指定的超時(shí)函數(shù)，再指定的超時(shí)函數(shù)里設(shè)置進(jìn)度條的標(biāo)簽的長(zhǎng)度，即可完成進(jìn)度條的顯示。
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>進(jìn)度條設(shè)計(jì)</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>效果圖：
代碼分析：
最內(nèi)部div用戶(hù)繪制進(jìn)度條，其外面的div標(biāo)簽用于繪制裝載進(jìn)度條的狹槽，最外部的div標(biāo)簽用于繪制外殼效果。
在本程序的運(yùn)行中，發(fā)現(xiàn)有停滯效果，這是因?yàn)镴avaScript程序和CSS3的transition屬性不一致所造成的。如果希望進(jìn)度條過(guò)度順利可以取消超時(shí)函數(shù)里面的超時(shí)重設(shè)，并直接將進(jìn)度條設(shè)置為超過(guò)100%，并將transition屬性的變化時(shí)間設(shè)置為較長(zhǎng)的時(shí)間即可。
總結(jié)
- 上一篇： 锤子t1android驱动,锤子T1痛失
- 下一篇： JS实现动态进度条