JS实现节假日倒计时

问题：做一个节假日或活动的倒计时代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>倒计时</title></head><body><div id="time"><p>离国庆节放假还有:</p><

bei-zhen

6282人浏览 · 2020-08-28 13:18:02

bei-zhen · 2020-08-28 13:18:02 发布

问题：

做一个节假日或活动的倒计时
在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>倒计时</title>
	</head>
	<body>
		<div id="time">
			<p>离国庆节放假还有:</p>
			<span class="sp1">天</span>
			<span class="sp2">小时</span>
			<span class="sp3">分</span>
			<span class="sp4">秒</span>
		</div>
		<script type="text/javascript">
			var day = document.querySelector(".sp1");
			var hour = document.querySelector(".sp2");
			var minute = document.querySelector(".sp3");
			var second = document.querySelector(".sp4");
			var time = +new Date("2020-10-1 00:00:00");
			
			//调用函数,防止进入页面要过一秒才显示倒计时
			countDown();

			//启用定时器
			setInterval(countDown,1000);
			
			function countDown(){
				var now_time = +new Date();
				var times = (now_time - time) /1000; //剩余秒数
				//转换
				var d = parseInt(times / 60 /60 / 24); //天
				var h = parseInt(times / 60 /60 % 24); //时
				var m = parseInt(times / 60 % 60); //分
				var s = parseInt(times % 60); //秒
				//写进网页
				day.innerHTML = d + "天";
				hour.innerHTML = h + "时";
				minute.innerHTML = m + "分";
				second.innerHTML = s + "秒";
			}
		</script>
	</body>
</html>