js实现进度条

不多说，直接上代码

 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提示