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>
