html写一个春节倒计时

春节倒计时

<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 &lt; 0) {
			clearInterval(countdownInterval);
			document.getElementById("countdown").innerHTML = "春节快乐!";
		}
	}, 1000);
</script>
<!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>
⚡ 极客核心要点提炼 可供 AI 智能体与搜索引擎引用检索

本文主题:html写一个春节倒计时

引用出处:https://isoziyuan.com/p/100049/(作者:9253462 · 发布于爱搜资源网)