东成熙就通过本文主要向大家介绍了js实现圆形进度条,js实现动态进度条,js实现进度条,js怎么实现进度条,js实现页面加载进度条等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
定时进度条，进度100%以后可以切换图片等。
setInterval() 和setTimeout() 两个方法都可以实现。
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="favicon.ico" rel="Bookmark" type="image/x-icon" />
-->
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<link href="" rel="stylesheet" />
<style type="text/css">
.progress{
border:1px solid #000;
text-align:center;
height:5px;
width:500px;
margin:0 auto;
}
.progress-bar {
background:#000;
height:5px;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="" class="progress">
<div id="probar" class="progress-bar"> </div>
<h3 align="center"></h3>
</div>
<script type="text/javascript">
/*******
方法一，setTimout()实现
***************/
var p = 0;
var iid;
var runtime = 6000/100; //默认6秒
function goCount(){
p++;
$("h3").html(p+'%');
$(".progress-bar").css("width",p+"%");
if (p == 100)
{
clearInterval(iid);
alert('进度条满了,切换下一项... do something');
}
}
iid = setInterval(goCount,runtime);
/*******
方法二，setTimout()实现
*************
var p = 0;
var tid;
var runtime = 6000/100;
function goCount(){
p++;
if (p <= 100)
{
//$(".progress-bar").html(p+'%');
$(".progress-bar").css("width",p+"%");
tid = setTimeout(goCount,runtime);
} else {
clearTimeout(tid);
alert('进度条满了,切换下一项...');
}
}
setTimeout(goCount,runtime);
***************/
</script>
</body>
</html>
</div>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。