不多说，直接上代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ProgressBar</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #progress{ 12 width: 100%; 13 height: 30px; 14 background: rgb(42, 138, 248); 15 } 16 #bar{ 17 width: 1%; 18 height: 28px; 19 margin-top: 1px; 20 background: purple; 21 } 22 23 </style> 24 25 </head> 26 <body> 27 <div id="progress"> 28 <div id="bar"></div> 29 </div> 30 <div><h3 id="text-progress">0%</h3></div> 31 <input type="button" id=“btn” value="点击开始" onclick="action()"> 32 </body> 33 <script> 34 function action(){ 35 var iSpeed=1; 36 obj=setInterval(function(){ 37 iSpeed+=1; 38 if(iSpeed>=100){ // 设置达到多少进度后停止 39 clearInterval(obj); 40 } 41 bar.style.width=iSpeed+'%'; 42 document.getElementById('text-progress').innerHTML=iSpeed+'%'; 43 44 },100); // 1s后函数执行一次 45 } 46 </script> 47 </html>
结果
写完之后发现有个bug，点击开始后再次点击进度条会再次执行
解决办法：1、点击开始后，将button的disabled设置为disabled，使不能再次点击
2、添加判断，给出message提示，如果进度条在进行中再次点击给一个alter提示