页面多个倒计时

最新推荐文章于 2021-09-03 15:49:26 发布

Bright2017

最新推荐文章于 2021-09-03 15:49:26 发布

阅读量1.2k

点赞数 2

分类专栏： Jquery 网页中用到过的效果

本文链接：https://blog.csdn.net/Bright2017/article/details/82662579

版权

网页中用到过的效果同时被 2 个专栏收录

138 篇文章 0 订阅

订阅专栏

Jquery

25 篇文章 0 订阅

订阅专栏

<!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/

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

Bright2017

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
页面多个倒计时

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;页面多个倒计时&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="Collage
复制链接

扫一扫