Home > Article > Web Front-end > JavaScript implements native code for progress bar
JavaScript implements native code for progress bar
- 黄舟Original
- 2017-11-21 09:29:192126browse
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>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>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!