Home > Article > Web Front-end > js method to implement progress bar_javascript skills

js method to implement progress bar_javascript skills

WBOYOriginal: 2016-05-16 16:14:171368browse

The example in this article describes how to implement the progress bar in js. Share it with everyone for your reference. The specific implementation method is as follows:

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

Rendering:

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

Rendering:

3.The difference between setTimeout and setInterval

setTimeout() only executes code once. If you want to call it multiple times, use setInterval(). The setInterval() method will keep calling the function until clearInterval() is called or the window is closed, or the code itself calls setTimeout() again.

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Understanding and analyzing nodejs event monitoring and triggering_node.jsNext article：Understanding and analyzing nodejs event monitoring and triggering_node.js

See more

js method to implement progress bar_javascript skills

Related articles