<html> <head> <title>進度條</title> <style type="text/css"> .loadbar{ width:450px; background:#c6dcfa; height:20px; border-radius:10px ; } #bar{ background:#4d8ef0; float:left; height: 20px; text-align:center; border-radius:10px ; font-family: arial; color: #FFFFFF; font-size: 14px; line-height: 20px; } </style> <script type="text/javascript"> function setProcess(){ var processbar = document.getElementById("bar"); processbar.style.width = parseInt(processbar.style.width) + 1 + "%"; processbar.innerHTML = processbar.style.width; if(processbar.style.width == "30%"){ window.clearInterval(bartimer); } } var bartimer = window.setInterval(function(){setProcess();},50); window.onload = function(){ bartimer; } </script> </head> <body> <div class="loadbar"> <div id="bar" style="width:0%;"></div> </div> </body> </html>
JavaScript進度條
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章