html写一个春节倒计时-AI资源网

春节倒计时

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>春节倒计时</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			text-align: center;
		}
		h1 {
			font-size: 3rem;
			margin-top: 2rem;
		}
		#countdown {
			font-size: 2rem;
			margin-top: 1rem;
		}
	</style>
</head>
<body>
	<h1>春节倒计时</h1>
	<div id="countdown"></div>

	<script>
		// 设置倒计时截止日期
		var countdownDate = new Date("2024-02-01T00:00:00Z").getTime();

		// 每秒更新倒计时
		var countdownInterval = setInterval(function() {
			// 获取当前时间
			var now = new Date().getTime();

			// 计算剩余时间
			var remainingTime = countdownDate - now;

			// 将剩余时间转换为天、小时、分钟和秒
			var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
			var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
			var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
			var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

			// 更新倒计时
			document.getElementById("countdown").innerHTML = days + "天 " + hours + "小时 "
			+ minutes + "分钟 " + seconds + "秒 ";

			// 倒计时结束时清除计时器
			if (remainingTime < 0) {
				clearInterval(countdownInterval);
				document.getElementById("countdown").innerHTML = "春节快乐！";
			}
		}, 1000);
	</script>
</body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END