Jquery implementation of a simple progress bar effect example
- 2020-03-30 02:55:11
- OfStack
Jquery implements the effect of a progress bar, which may not have any practical effect here, but it has implemented part of the principle of a progress bar, and how the front end implements that progress effect.
Effect demonstration:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201451290213769.jpg? 20144129230 ">
Progress bar source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery Implementation progress bar </title>
<style>
.progressBar{width:200px;height:8px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;}
#bar{width:0px;height:8px;border-radius:5px;background:#5EC4EA;}
</style>
<script type="text/jscript" src="jquery.min.js"></script>
<script type="text/javascript">
function progressBar(){
//Initialize the js progress bar
$("#bar").css("width","0px");
//The smaller the progress bar, the faster
var speed = 20;
bar = setInterval(function(){
nowWidth = parseInt($("#bar").width());
//The width must not be greater than the total width of the progress bar
if(nowWidth<=200){
barWidth = (nowWidth + 1)+"px";
$("#bar").css("width",barWidth);
}else{
//When the progress bar is full, stop
clearInterval(bar);
}
},speed);
}
</script>
</head>
<body>
<input type="button" value=" start " onclick="progressBar()" />
<div class="progressBar"><div id="bar"></div></div>
</body>
</html>