javascript进度条实现 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8" />
 6         <title>测试进度条</title>
 7         <style>
 8             div#loadbar {
 9                 width: 300px;
10                 background-color: lavender;
11                 #border: 1px solid fuchsia;
12                 text-align: center;
13                 border-radius: 5px;
14             }
15 
16             #bar {
17                 display: block;
18                 font-family: arial;
19                 font-size: 12px;
20                 background-color: red;
21                 text-align: center;
22                 padding: 5px 0px;
23                 border-radius: 5px;
24             }
25         </style>
26         <script type="text/javascript">
27             var i = 0;
28             function startbar() {
29                 var showbar = setInterval("setbar()", 1000);
30             }
31 
32             function setbar() {
33                 console.log("setbar");
34                 i += 20;
35                 if(i > 100) {
36                     clearInterval(showbar);
37                 }
38                 document.getElementById("bar").style.width = i + "%";
39                 document.getElementById("bar").innerHTML = i + "%";
40             }
41             startbar();
42         </script>
43     </head>
44 
45     <body>
46         <div id="loadbar">
47             <span id="bar" style="width: 0%;">20%</span>
48         </div>
49     </body>
50 
51 </html>

 

posted @ 2017-11-17 11:00  飘絮不飘  阅读(215)  评论(0)    收藏  举报