1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset ="utf-8"> 5 <title>JavaScript 百分比进度条</title> 6 <style> 7 #container{ 8 100%; 9 height:30px; 10 border:1px solid lightgrey; 11 margin:40px 12 } 13 #bar{ 14 height:30px; 15 background:green; 16 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>