我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛
在线演示地址
第 1 步：倒数计时器的基本结构
这里我使用了一行h1和一行div。然后用下面的 css 代码设计了网页。使用背景色 #f3b661，你也可以使用任何其他你想要的颜色。
<h1>距离2021年中秋节还有</h1> <div id="timer"></div> 复制代码
body { text-align: center; padding: 50px 60px; background: #f3b661; font-family: sans-serif; font-weight: lighter; } 复制代码
效果：
第 2 步：使用 JavaScript 代码激活它
现在我已经在 JavaScript 的帮助下实现了这个倒数计时器。首先，我们在Date.parse的帮助下设置了一个特定的日期。也就是说，你必须确定要运行倒计时的时间，我们设置好中秋节是9月21日00：00。
future = Date.parse("sep 21, 2021 00:00:00"); 复制代码
然后使用我new Date ()从设备中获取当前时间的方法。在这里使用的时间不是任何服务器的时间，只是我们设备的当地时间。
然后我从预定时间中减去当前时间并将其存储在差异（常量）中。结果，我一共得到了多少时间倒计时。
now = new Date(); diff = future - now; 复制代码
现在使用 JavaScript 的Math.floor.
➤ 一秒等于 1000 毫秒，所以我们划分了整个倒计时时间 (diff) 1000
➤ 一分钟等于 60 秒，所以在这种情况下它被划分1000 * 60
➤ 一小时等于 60 分钟，在这种情况下它被划分1000 * 60 * 60
➤ 一天等于 24 小时，所以在这种情况下它被划分1000 * 60 * 60 * 24。
days = Math.floor(diff / (1000 * 60 * 60 * 24)); hours = Math.floor(diff / (1000 * 60 * 60)); mins = Math.floor(diff / (1000 * 60)); secs = Math.floor(diff / 1000); 复制代码
d = days; h = hours - days * 24; m = mins - hours * 60; s = secs - mins * 60; 复制代码
上面我们已经完成了所有的计算工作，现在我们将它整齐地排列在网页中。为此，我使用了innerhtml，并在其中精美地安排了如何在网页中看到它。在这里，我分别添加了天、小时、分钟、秒等文本。
document.getElementById("timer") .innerHTML = '<div>' + d + '<span>Days</span></div>' + '<div>' + h + '<span>Hours</span></div>' + '<div>' + m + '<span>Minutes</span></div>' + '<div>' + s + '<span>Seconds</span></div>'; 复制代码
最后，我们指示每一千毫秒使用setInterval. 由于倒计时时间每秒都是间歇性的，所以这个系统需要每秒更新一次。
setInterval('updateTimer()', 1000); 复制代码
第 3 步：给出 timer 的大小和布局
现在我已经使用一些基本的 css 代码设计了它，并在网页中精美地安排了它。正如您在上图中所看到的，每次都有一个小盒子。我使用下面的代码创建了那个盒子。在这种情况下，我使用了 box 的背景颜色# 020b43。
#timer { font-size: 3em; font-weight: 100; color: white; padding: 20px; color: white; } #timer div { display: inline-block; min-width: 90px; padding: 15px; background: #020b43; border-radius: 10px; border: 2px solid #030d52; margin: 15px; } 复制代码
希望从本教程中您已经学会了如何使用 JavaScript 制作简单的中秋倒数计时器！
