定时进度条进度100%以后可以切换图片_进度条在规定的秒数内到达100%-CSDN博客

本文链接：https://blog.csdn.net/phpfer/article/details/49763897

进度条

定时进度条，进度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>