定时进度条，进度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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- js实现增加数字显示的环形进度条效果
- JavaScript实现水平进度条拖拽效果
- JSP数据分页导出下载显示进度条样式
- JS插件plupload.js实现多图上传并显示进度条
- JS实现环形进度条（从0到100%）效果
- js ajax加载时的进度条代码
- pace.js页面加载进度条插件
- JavaScript实现网页加载进度条代码超简单
- js插件YprogressBar实现漂亮的进度条效果
- javascript 网页进度条简单实例
