進度條（點選一次進一點，意思是後臺傳入一個數就進度就多一點）
阿新 • • 發佈：2019-01-31
<!DOCTYPE"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>進度條</title> <style type="text/css"> body{ text-align:center; } .graph{ width:450px; border:1px solid #F8B3D0; height:25px; } #bar{ display:block; background:#FFE7F4; float:left; height:100%; text-align:center; } #barNum{ position:absolute; } </style> <script type="text/javascript"> function $(obj){ return document.getElementById(obj); } function go(){ $("bar").style.width = parseInt($("bar").style.width) + 1 + "%"; $("bar").innerHTML = $("bar").style.width; if($("bar").style.width == "100%"){ window.clearInterval(bar); //進度為100時清除定時器 } } //var bar = window.setInterval("go()",50); //設定定時器 window.onload = function(){ bar; } </script> </head> <body> <div class="graph"> <strong id="bar" style="width:1%;"></strong> </div> <input type="button" value="+1" onclick="go()"> </body> </html>
