js实现倒计时-掌上秒杀

最新推荐文章于 2023-03-29 14:40:04 发布

viceen

最新推荐文章于 2023-03-29 14:40:04 发布

阅读量595

点赞数

分类专栏： js知识文章标签： js html

本文链接：https://blog.csdn.net/weixin_44867717/article/details/109646231

版权

js知识专栏收录该内容

152 篇文章 12 订阅

订阅专栏

js实现倒计时-掌上秒杀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>掌上秒杀-倒计时</title>
</head>
<body>
    <span id="hours"></span>:
    <span id="minutes"></span>:
    <span id="seconds"></span>

    <script type="text/javascript">
		
		// 需要活动开始时间
		// 需要有结束时间
		// 用结束事件-开始时间，就是活动时长，把时间变换成时分秒就可以完成这个功能
		

		// 获取元素
		var hours = document.getElementById('hours');
		var minutes = document.getElementById('minutes');
		var seconds = document.getElementById('seconds');

		timer();
		var dsq = window.setInterval(function () {

			timer();

		},1000);


		function timer () {
			// 开始时间
			var start = new Date();
			// 结束时间
			var end = new Date('2020/11/12 23:30:00');
			// 计算差值
			var val = end - start;

			// 转成时分秒
			var h = parseInt( val / 1000 / 60 / 60 );
			var m = parseInt( val / 1000 / 60 % 60 );
			var s = parseInt( val / 1000 % 60 );

			// console.log(s);
			
			// 判断，如果不足两位数前面补0去显示
			h = h < 10 ? '0' + h : h;
			m = m < 10 ? '0' + m : m;
			s = s < 10 ? '0' + s : s;

			hours.innerText = h;
			minutes.innerText = m;
			seconds.innerText = s;

			// 判断时间是否结束活动
			if (val < 0) {

				// 清除定时器
				window.clearInterval(dsq);
				hours.innerText = '00';
				minutes.innerText = '00';
				seconds.innerText = '00';

			}
		}
	</script>
</body>
</html>

viceen

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
js实现倒计时-掌上秒杀

js实现倒计时-掌上秒杀<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>掌上秒杀-倒计时</title></head><body>
复制链接

扫一扫