JavaScript implements native code for progress bar-JS Tutorial-php.cn

JavaScript implements native code for progress bar

黄舟

Release： 2017-11-21 09:29:19

Original

2176 people have browsed it

In our daily development work, I believe that our friends should be familiar with Progress bar. The progress bar still plays a very important role in our project, so today we will give you the details Introducing the JavaScript example analysis of implementing the progress bar!

setTimeout and clearTimeou

<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>

Copy after login

Rendering:

<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>

Copy after login

Rendering:

3. The difference between setTimeout and setInterval

setTimeout() only executes the 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.

Summary:

# I believe that through studying this article, you will have a better understanding of the JavaScript implementation of the progress bar. When you encounter When you meet the same requirement, you can refer to this article. I hope it will be helpful to you!

Related recommendations:

JS native upload large file display progress bar-php file upload

Instance of JavaScript implementing progress bar based on timer

JavaScript implementing audio control progress bar

Introduction to the method of displaying the process progress bar by combining JS and HTML

The above is the detailed content of JavaScript implements native code for progress bar. For more information, please follow other related articles on the PHP Chinese website!