倒计时代码解析-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43684588/article/details/126996877

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			#times_container {
				border: 1px;
				border-color: #999999;
				border-style: solid;
				background: #333333;
				color: #FFFFFF;
				width: 560px;
				height: 40px;
				line-height: 40px;
				font-size: 24px
			}
		</style>
	</head>
	<body>
		<div id="times_container">
			距离活动结束还有：<span id="times_day"> </span>
		</div>
		<script type="text/javascript">
			function countDownTime(time) {
				var nowtime = new Date(), //获取当前时间
					endtime = time; //定义结束时间
				let timestamp = endtime - nowtime.getTime(); //距离结束时间的毫秒数
				if (timestamp < 0) {
					return "截止了"
				}
				let D = Math.floor(timestamp / (1000 * 60 * 60 * 24)); //计算天数
				let H = Math.floor(timestamp / (1000 * 60 * 60) % 24); //计算小时数
				let m = Math.floor(timestamp / (1000 * 60) % 60); //计算分钟数
				let s = Math.floor(timestamp / 1000 % 60); //计算秒数
				if (m < 10) {
					m = '0' + m
				}
				if (s < 10) {
					s = '0' + s
				}
				return `${D} 天 ${H} 小时 ${m} 分钟 ${s} 秒`
			}

			function realTime() {
				var endTiem = new Date("2022-10-29 00:00:00").getTime()
				var time_day = document.getElementById("times_day");
				time_day.innerHTML = countDownTime(endTiem)
			}
			setInterval(realTime, 100); //设置每一秒调用一次倒计时函数
		</script>
	</body>
</html>

</html>

js 倒计时