页面多个倒计时

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Bright2017/article/details/82662579
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面多个倒计时</title>
	</head>
	<body>
		<div class="CollagePeople-bot">
			<ul>
				<li>
					<span>倒计时</span>
					<span class="intDifftime" endTime="2020-09-13 10:02:06">剩余 0天22小时08分钟10秒</span>
				</li>
				<li>
					<span>倒计时</span>
					<span class="intDifftime" endTime="2021-09-13 10:02:06">剩余 0天22小时08分钟10秒</span>
				</li>
				<li>
					<span>倒计时</span>
					<span class="intDifftime" endTime="2022-09-13 10:02:06">剩余 0天22小时08分钟10秒</span>
				</li>
				<li>
					<span>倒计时</span>
					<span class="intDifftime" endTime="2023-09-13 10:02:06">剩余 0天22小时08分钟10秒</span>
				</li>
				<li>
					<span>倒计时</span>
					<span class="intDifftime" endTime="2024-09-13 10:02:06">剩余 0天22小时08分钟10秒</span>
				</li>
				<li>
					<span>倒计时</span>
					<span class="intDifftime" endTime="2025-09-13 10:02:06">剩余 0天22小时08分钟10秒</span>
				</li>
				<li>
					<span>倒计时</span>
					<span class="intDifftime" endTime="2026-09-13 10:02:06">剩余 0天22小时08分钟10秒</span>
				</li>
				<li>
					<span>倒计时</span>
					<span class="intDifftime" endTime="2027-09-13 10:02:06">剩余 0天22小时08分钟10秒</span>
				</li>
			</ul>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				updateEndTime();
			});
			function updateEndTime(){
			    var NowTime = new Date();
			    var time = NowTime.getTime(); 
				$(".CollagePeople-bot>ul>li .intDifftime").each(function(I){
				var endDate =this.getAttribute("endTime"); 
				console.log("aa",endDate);
				var endDate1 = eval('new Date(' + endDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');
				var endTime = endDate1.getTime(); 
				var lag =Math.floor((endTime - time) / 1000); 
				console.log("秒数",endTime);
	//			判断计时是否停止
				if(lag > 0){
					var day = Math.floor(lag / (60 * 60 * 24));var h = Math.floor(lag / 3600);var d = Math.floor(h/24);var m = Math.floor(lag/60%60);var s = lag%60;$(this).html(day+'天'+ h +"小时"+ m +"分钟"+ s +'秒');
				}else{
					console.log("倒计时结束");
				}});
				setTimeout("updateEndTime()",1000);
			}
		</script>
	</body>
</html>

Demo演示:http://www.bright2017.top/test1/test1-24/

猜你喜欢

转载自blog.csdn.net/Bright2017/article/details/82662579