js中的秒杀【倒计时】

加油中…………

已于 2022-11-03 18:32:26 修改

阅读量1.1k

点赞数 1

分类专栏： js实现文章标签： html 前端 servlet

于 2022-08-23 11:32:50 首次发布

本文链接：https://blog.csdn.net/qq_71808304/article/details/126481414

版权

js实现专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.box{
			width: 400px;
			margin: 20px auto;
		}
	</style>
	<body>
		
		<div class="box">
			距离明年的中秋还有：&nbsp;
			<span id="t"></span>
			<span id="d"></span> <!-- 剩余的天数 -->
			<span id="h"></span> <!-- 剩余的小时 -->
			<span id="m"></span> <!-- 剩余的分钟 -->
			<span id="s"></span> <!-- 剩余的秒数 -->
		</div>
		<script>
			//设置秒杀结束时间
			var endTime = new Date('2023-09-09 24:00:00'),
				endSeconds = endTime.getTime();
			//定义变量保存剩余的时间
			var t = d = h = m = s = 0;
			//设置定时器，实现限时秒杀效果
			var id = setInterval(seckill, 1000); //计时器 开始 setInterval 按照指定的周期（以毫秒计）来调用函数或计算表达式。
			function seckill() {
				var nowTime = new Date(); //获取当前时间
				//获取时间差，单位为秒
				var remaining = parseInt((endSeconds - nowTime.getTime()) / 1000);//getTime 返回到毫秒
				if (remaining > 0) { //判断秒杀是否过期
					t = parseInt(remaining / 31536000);// parseInt  方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数
					//计算剩余天数（除以60*60*24取整，获取剩余的天数）
					d = parseInt((remaining / 86400) % 365);
					//计算剩余小时（除以60*60转换为小时，与24小时取模，获取剩余的小时）
					h = parseInt((remaining / 3600) % 24);
					//计算剩余分钟（除以60转为分钟，与60取模，获取剩余的分钟）
					m = parseInt((remaining / 60) % 60);
					//计算剩余秒（与60取模，获取剩余的秒数）
					s = parseInt(remaining % 60);
					//统一利用两位数表示剩余的天、小时、分钟、秒
					d = d < 10 ? '0' + d : d;//如果出来的值小于零 那么在前面加一个0
					h = h < 10 ? '0' + h : h;
					m = m < 10 ? '0' + m : m;
					s = s < 10 ? '0' + s : s;
				} else {
					clearInterval(id); //秒杀过期，取消定时器
					d = h = m = s = '00';
				}
				//将剩余的天，小时，分钟和秒显示到指定的网页中
				document.getElementById('t').innerHTML = t + '年';
				document.getElementById('d').innerHTML = d + '天';
				document.getElementById('h').innerHTML = h + '时';
				document.getElementById('m').innerHTML = m + '分';
				document.getElementById('s').innerHTML = s + '秒';
			}
		</script>
	</body>
</html>