js untuk melaksanakan kemahiran bar_javascript kemajuan-tutorial js-php.cn

js untuk melaksanakan kemahiran bar_javascript kemajuan

WBOY

Lepaskan： 2016-05-16 16:14:17

asal

1383 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara melaksanakan bar kemajuan dalam js. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

1.setTimeout dan 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>

Salin selepas log masuk

Rendering:

2.setInterval dan 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>

Salin selepas log masuk

Rendering:

3. Perbezaan antara setTimeout dan setInterval

setTimeout() hanya melaksanakan kod sekali sahaja. Jika anda ingin memanggilnya beberapa kali, gunakan setInterval() Kaedah setInterval() akan terus memanggil fungsi sehingga clearInterval() dipanggil atau tetingkap ditutup, atau kod itu sendiri memanggil setTimeout() sekali lagi.

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.