本文介绍如何使用JavaScript的setInterval和setTimeout方法实现定时进度条。当进度达到100%时，触发图片切换逻辑。文章提供了完整的HTML源码示例，展示了从进度条逻辑到后续动作触发的实现过程，适用于前端开发中的动态交互场景。
JavaScript实现定时进度条与图片切换
实现一个定时的进度条功能，当进度值达到100%时，可以触发如切换图片等后续操作。
在JavaScript中，可以使用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> 以上即为实现该功能的全部代码内容，希望能为读者的学习提供便利，同时也欢迎读者继续支持本站。