效果圖

點擊“開始”按鈕，進度條從0到100，自動停止，可多次點擊

HTML

<div id="box"><div class="bar"><span>0%</span></div></div><button onclick="fn()">開始</button>

CSS

#box {width: 400px;height: 300px;position: relative;border: solid 1px black;margin: 50px auto;}.bar {width: 0px;height: 30px;background: green;border-radius: 6px;position: absolute;top: 135px;line-height: 30px;text-align: center;color: #fff;}

JS

//進度條所在的盒子，調整其寬度可實現進度條效果var bar = box.querySelector(".bar");//進度條上顯示的數字，調整其內容var span = box.querySelector('span');var w = 400;//最終寬度var times;//計時器function fn() {var wSmall = 0;//初始寬度為0times = setInterval(function () {wSmall += 20;//每次加20bar.style.width = wSmall + 'px';//寬度改變if (wSmall >= w) {//如果寬度超過最終寬度clearInterval(times);//清空定時器}else{//設置進度條上的文字span.innerHTML=Math.ceil(wSmall/10*2.62)+'%';}}, 100);}

總結

以上是生活随笔為你收集整理的【JS】模拟进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。