阅读 386

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

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

在线演示地址

haiyong.site/zhongqiu202…

第 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;
}
复制代码

效果:

image.png

第 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);
复制代码

image.png

第 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;
}
复制代码

image.png

希望从本教程中您已经学会了如何使用 JavaScript 制作简单的中秋倒数计时器