js实现进度条的方法

本文实例讲述了js实现进度条的方法。分享给大家供大家参考。具体实现方法如下：
1.setTimeout和clearTimeout

<html> <head> <title>进度条</title> <style type="text/css">.container{ width:450px; border:1px solid #6C9C2C; height:25px; } #bar{ background:#95CA0D; float:left;height:100%; text-align:center; line-height:150%;}</style><script type="text/javascript">function run（）{var bar = document.getElementById（"bar"）; var total = document.getElementById（"total"）; bar.style.width=parseInt（bar.style.width） + 1 + "%";total.innerHTML = bar.style.width; if（bar.style.width == "100%"）{window.clearTimeout（timeout）; return; } var timeout=window.setTimeout（"run（）",100）; } window.onload = function（）{ run（）; }</script></head> <body> <div class="container"><div id="bar" style="width:0%;"></div></div><span id="total"></span> </body> </html>

效果图：

2.setInterval和clearInterval

<html><head><title>进度条</title><style type="text/css">.processcontainer{ width:450px; border:1px solid #6C9C2C; height:25px; }#processbar{ background:#95CA0D; float:left;height:100%; text-align:center; line-height:150%;}</style><script type="text/javascript"> function setProcess（）{var processbar = document.getElementById（"processbar"）;processbar.style.width = parseInt（processbar.style.width） + 1 + "%";processbar.innerHTML = processbar.style.width;if（processbar.style.width == "100%"）{ window.clearInterval（bartimer）;} }var bartimer = window.setInterval（function（）{setProcess（）;},100）;window.onload = function（）{ bartimer;}</script></head><body><div class="processcontainer"> <div id="processbar" style="width:0%;"></div></div></body></html>

效果图：

3.setTimeout和setInterval区别
setTimeout（）只执行 code 一次。如果要多次调用，请使用 setInterval（），setInterval（）方法会不停地调用函数，直到 clearInterval（）被调用或窗口被关闭，或者让 code 自身再次调用 setTimeout（）。
希望本文所述对大家的javascript程序设计有所帮助。