JavaScript_基于JS的进度条

开发时，需要用到的JavaScript进度条~~~

 

<style type="text/css"> #out { width:200px; height:16px !important; border:1px solid #5858D1; text-align:center; position:relative; font-size:12px; _height:18px; } #out, #out * { padding:0; margin:0; } #num { height:16px; line-height:16px; position:absolute; top:0; left:90px; z-index:1001; } #step { background:#5858D1; width:5%; overflow:hidden; position:absolute; left:0; top:0; height:16px; z-index:1000; } </style> <div id="out"> <span id="num">5%</span> <div id="step"></div> </div> <script type="text/javascript"> var timer; var stepNum = 0; function start() { timer = setInterval("begin()", 10); } function begin() { stepNum += 1; if (stepNum < 101) { document.getElementById("step").style.width = stepNum + "%"; document.getElementById("num").innerHTML = stepNum + "%"; } else { clearInterval(timer); // 加载完了，该干嘛干嘛 //window.location = 'http://www.codebit.cn'; } } window.onload = function() { start(); } </script> <Br><br> <span style="padding:0;margin:0;width:200px;height:16px !important;border:1px solid #5858D1;text-align:center;position:relative;font-size:12px;_height:18px;"> <span style="width:50px;height:16px;position:absolute;left:0;top:0;background:#5858D1;width:50%"></span> </span>