js实现进度条

2018-10-24 08:41:40来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

不多说,直接上代码

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue 关于数组和对象的更新

下一篇:火狐浏览器下显示页面有点大的bug