使用 JavaScript 制作简单的中秋倒数计时器！

鲸落c

发布于 2022-11-14 16:39:18

1.9K0

发布于 2022-11-14 16:39:18

文章被收录于专栏：鲸落学习笔记

theme: channing-cyan highlight: a11y-dark

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

在线演示地址

http://haiyong.site/zhongqiu2021

第 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;
}