js实现进度条 - 技术经验

js实现进度条

来源：cnblogs　　作者：Tynam.Yang　　时间：2018/10/24 9:07:34　　对本文有异议

不多说，直接上代码

 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>