JavaScript 日期倒计时代码示例 - 详细教程 - 常规

以下是 JS 日期倒计时代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>JS Countdown Timer</title>
</head>
<body>
	<h1 id='countdown'></h1>

	<script>
		// 设置倒计时的目标日期
		var countDownDate = new Date('Jan 1, 2022 00:00:00').getTime();

		// 每隔 1 秒更新一次倒计时
		var x = setInterval(function() {

			// 获取当前日期和时间
			var now = new Date().getTime();

			// 计算目标日期与当前日期的时间差
			var distance = countDownDate - now;

			// 计算剩余的天数、小时、分钟和秒数
			var days = Math.floor(distance / (1000 * 60 * 60 * 24));
			var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
			var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
			var seconds = Math.floor((distance % (1000 * 60)) / 1000);

			// 在页面上显示倒计时
			document.getElementById('countdown').innerHTML = days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';

			// 如果倒计时结束，显示 'EXPIRED'
			if (distance < 0) {
				clearInterval(x);
				document.getElementById('countdown').innerHTML = 'EXPIRED';
			}
		}, 1000);
	</script>
</body>
</html>

这段代码将在页面上显示一个倒计时，直到指定日期。该代码使用 setInterval() 方法每隔 1 秒更新一次倒计时，并使用 JavaScript 进行日期和时间计算。innerHTML 属性用于将计算结果显示在页面上。

代码解释：

设置目标日期：
- 使用 new Date('Jan 1, 2022 00:00:00') 创建一个表示目标日期的 Date 对象。
- 使用 getTime() 方法获取目标日期的毫秒时间戳。
更新倒计时：
- 使用 setInterval() 方法每隔 1 秒执行一次回调函数。
- 在回调函数中：
  - 获取当前日期和时间的毫秒时间戳。
  - 计算目标日期与当前日期的时间差。
  - 计算剩余的天数、小时、分钟和秒数。
  - 将计算结果显示在页面上。
  - 如果倒计时结束，停止计时器并显示 'EXPIRED'。

使用说明：

更改代码中的 countDownDate 变量的值以设置不同的目标日期。
可以根据需要修改倒计时的显示格式。
该代码仅适用于简单的倒计时功能。对于更复杂的计时需求，可能需要使用其他方法。