JavaScript實現一個簡單的進度條（有進度含百分比）
阿新 • • 發佈：2020-12-19
技術標籤：javascriptjavascript
效果圖：
程式碼：
<!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:40%;position:absolute;top: 20%;font-size:70px"> <div class="box" id="div_box"><div class="load" id="load"></div></div> <span id='result'></span> </div> </body> <script> var speed=110; var n=0; var result = document.getElementById('result'); var load = document.getElementById('load'); var timer = setInterval(function(){ if(n<=100){ n+=Math.floor(Math.round(Math.random()*(100-10)+10)/10);// 這裡採用隨機的兩位數來模擬 if(n>100)n=100; result.innerText=n+"%"; load.style.width=n*3+'px'; }else{ clearInterval(timer); } },speed) </script> </html>