1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>测试进度条</title> 7 <style> 8 div#loadbar { 9 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=" 0%;">20%</span> 48 </div> 49 </body> 50 51 </html>