页面多个倒计时

末蓝、 2022-05-13 11:16 221阅读 0赞

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<title>页面多个倒计时</title>
 	</head>
 	<body>
 		<div class="CollagePeople-bot">
 			<ul>
 				<li>
 					倒计时
 					剩余 0天22小时08分钟10秒
 				</li>
 				<li>
 					倒计时
 					剩余 0天22小时08分钟10秒
 				</li>
 				<li>
 					倒计时
 					剩余 0天22小时08分钟10秒
 				</li>
 				<li>
 					倒计时
 					剩余 0天22小时08分钟10秒
 				</li>
 				<li>
 					倒计时
 					剩余 0天22小时08分钟10秒
 				</li>
 				<li>
 					倒计时
 					剩余 0天22小时08分钟10秒
 				</li>
 				<li>
 					倒计时
 					剩余 0天22小时08分钟10秒
 				</li>
 				<li>
 					倒计时
 					剩余 0天22小时08分钟10秒
 				</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/][http_www.bright2017.top_test1_test1-24]

**如果有帮到你的话，欢迎激励一下作者。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

[http_www.bright2017.top_test1_test1-24]: http://www.bright2017.top/test1/test1-24/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220513/30a89a222b204b85a45b32c46eb41c8d.png