定时进度条进度100%以后可以切换图片

最新推荐文章于 2022-08-25 09:42:43 发布

东成熙就

最新推荐文章于 2022-08-25 09:42:43 发布

阅读量1.7k

点赞数

分类专栏： Javascript HTML5 文章标签：定时进度条进度条完成之后切换图片 setInterval setTimeout

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

版权

Javascript 同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

HTML5

18 篇文章 0 订阅

订阅专栏

进度条

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