js实现定时进度条完成后切换图片
编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
这篇文章主要介绍了js实现定时进度条,进度100%以后可以切换图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
定时进度条，进度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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。