JavaScript 进度条重复加载 

 1 <!DOCTYPE HTML>
 2 <html>
 3   <head>
 4     <meta charset ="utf-8">
 5     <title>JavaScript 百分比进度条</title>
 6     <style>
 7       #container{
 8   width:100%;
 9   height:30px;
10   border:1px solid lightgrey;
11   margin:40px
12 }
13 #bar{
14   height:30px;
15   background:green;
16   width:1%;
17 }
18 
19 
20     </style>
21   </head>
22   
23   <body>
24     <div id="container">
25       <div id="bar">
26         <div id="mybar">
27           
28         </div>
29       </div>
30     </div>
31     <button onclick="start()">
32       点击
33     </button>
34     <script>
35       function start(){
36   var mybar=document.getElementById("bar");
37   var width=1;
38   var time=setInterval(move,100);
39   function move(){
40     if(width >= 100){
41       width=1;
42     }else{
43       width++;
44       mybar.style.width=width+"%";
45       mybar.innerHTML=width*1+"%";
46     }
47   }
48 }
49     </script>
50   </body>
51 </html>

 

posted @ 2019-01-18 09:58  给自己一个梦  阅读(481)  评论(0)    收藏  举报