信鸽网

js实现进度条的方法

  作者：bea

本文实例讲述了js实现进度条的方法。分享给大家供大家参考。具体实现方法如下： 1.setTimeout和clearTimeout <html> <head> <title>进度条</title> <style type="text/css"> .container{ width:450px; border:1px solid #6C9C2C; height:25px; } #bar{

本文实例讲述了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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: