如何构建 JavaScript 倒数计时器

在本教程中，咱们将使用 vanilla javascript 实现一个计时器以倒计时到特定日期或时间。咱们还将实现倒计时完成后在网页上显示内容的功能。

如何构建 JavaScript 倒数计时器第1张

网页上的倒数计时器通常用于指示事件的结束或开始。它可用于让客户知道价格优惠何时到期，或在“即将推出”着陆页上显示网站何时发布。它还可以用于让用户知道是否需要尽快执行某项操作；例如，如果在一定时间内没有任何活动，某些网站会将用户退出页面。

所以，回到咱们正在制作的东西——这里是最终产品。在演示中按Rerun以启动倒计时功能：

See the Pen Countdown Timer to display content by Envato Tuts+ (@tutsplus) on CodePen.

让咱们开始吧！

1.创建标记

咱们将在此演示中使用两个部分：计时器部分和内容部分。计时器部分将包含用于显示倒计时剩余时间的元素，内容部分将是倒计时结束后显示的元素。

<section id="timer">
  <p>This content will be displayed in</p>
  <div class="timer-container">
    <span id="days">0 days</span>
    <span id="hours">0 hours</span>
    <span id="minutes">0 minutes</span>
    and
    <span id="seconds">0 seconds</span>
  </div>
</section>
 
<section id="content">
  <h1>Hello, World</h1>
</section

考虑可访问性

由于咱们正在构建一个信息不断变化的部分，因此咱们应该考虑如何将这些信息呈现给辅助技术。在这个演示中，咱们将使用timer角色来表示具有定期更新文本的元素。

<section id="timer">
  <p>This content will be displayed in</p>
  <div class="timer-container">
    <span id="days" role="timer">0 days</span>
    <span id="hours" role="timer">0 hours</span>
    <span id="minutes" role="timer">0 minutes</span>
    and
    <span id="seconds" role="timer">0 seconds</span>
  </div>
</section>
 
<section id="content">
  <h1>Hello, World</h1>
</section

2.设计部分

首次加载页面时，计时器容器具有最高优先级，因此咱们将使其成为一个固定容器，即页面的完整宽度和高度，因此在倒计时结束之前没有其他内容可见。咱们还将在咱们的内容上使用不透明样式来隐藏它。

#timer {
  position: fixed;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: 2;
}
 
#content {
  opacity: 0;

3.构建倒数计时器

这是咱们将用来处理倒数计时器的逻辑：

根据特定日期或时间定义倒计时值
获取当前日期并从咱们的倒计时中减去该值
每隔1s执行减法功能
如果倒计时日期小于或等于当前日期，则结束倒计时

让咱们从定义倒计时值开始。咱们可以使用两种可能的方法：

1. 将倒计时值定义为特定日期和时间

Date()咱们可以使用构造函数将倒计时值初始化为特定日期。此方法对于显示特别优惠或折扣很有用，因为倒计时结束时间将始终保持不变。例如，您可以使用倒数计时器来显示直到新年的折扣优惠。

let countdownDate = new Date('01 January 2023 00:00')

2. 将倒计时值定义为添加到当前日期的时间单位

咱们还可以通过将时间添加到当前日期来初始化倒数计时器。此方法对于处理基于用户的计时器交互很有用。为此，咱们使用 Date 获取和设置方法。例如，您可以设置一个计时器，在用户登陆网页 30 秒后显示内容。

let countdownDate = new Date().setSeconds(new Date().getSeconds() + 30);

咱们还可以将此函数修改为几分钟或几小时：

let countdownDate = new Date().setMinutes(new Date().getMinutes() + 5);
let countdownDate = new Date().setHours(new Date().getHours() + 1)

一旦咱们设置了倒计时值，咱们就可以定义咱们的常量：

  const daysElem = document.getElementById("days"),
  hoursElem = document.getElementById("hours"),
  minutesElem = document.getElementById("minutes"),
  secondsElem = document.getElementById("seconds"),
  timer = document.getElementById("timer"),
  content = document.getElementById("content")

然后咱们可以处理咱们的倒计时功能。

4.创建 startCountdown() 函数

咱们将创建一个新函数startCountdown()，称为获取当前日期并从倒计时日期中减去它。咱们将使用该Date.getTime()方法将两个值转换为毫秒，然后将差值除以 1,000 以转换为秒。

const startCountdown = () => {
  const now = new Date().getTime();
  const countdown = new Date(countdownDate).getTime();
  const difference = (countdown - now) / 1000;

咱们需要将差值转换为天、小时、分钟和秒来确定咱们的计时器值。

咱们可以通过将秒差除以一天的值（60 秒 * 60 分钟 * 24 小时）并四舍五入到最接近的值来将秒转换为天。

let days = Math.floor(difference / (60 * 60 * 24));

由于咱们的倒计时是一个相加值，咱们在计算时需要考虑前面的值。在转换为小时时，咱们首先需要知道相差多少天，然后将剩余的天数转换为小时。

例如，如果咱们有 90,000 秒，这将转换为 25 小时。但是，咱们不能将倒计时显示为1 天 25 小时，因为这将是不正确的时间。相反，咱们将首先计算以秒为单位的天数为 90000 / (60 * 60 * 24) = 1 天，余数为3600 秒。然后咱们可以通过除以 (60seconds * 60minutes) 将这个余数转换为小时，得到 1 小时。

let hours = Math.floor((difference % (60 * 60 * 24)) / (60 * 60));

对分钟和秒应用相同的累积除法：

let minutes = Math.floor((difference % (60 * 60)) / 60);let seconds = Math.floor(difference % 60);

然后咱们将计算出的值传递给 html 元素。考虑到语法，咱们可以定义一个函数，根据时间的值将时间单位文本格式化为单数或复数。

const formatTime = (time, string) => {  return time == 1 ? `${time} ${string}` : `${time} ${string}s`;};

咱们的startCountdown()函数现在看起来像这样：

const startCountdown = () => {
  const now = new Date().getTime();
  const countdown = new Date(countdownDate).getTime();
 
  const difference = (countdown - now) / 1000;
 
  let days = Math.floor(difference / (60 * 60 * 24));
  let hours = Math.floor((difference % (60 * 60 * 24)) / (60 * 60));
  let minutes = Math.floor((difference % (60 * 60)) / 60);
  let seconds = Math.floor(difference % 60);
 
  daysElem.innerHTML = formatTime(days, "day");
  hoursElem.innerHTML = formatTime(hours, "hour");
  minutesElem.innerHTML = formatTime(minutes, "minute");
  secondsElem.innerHTML = formatTime(seconds, "second");
}

5.间隔运行咱们的函数

现在咱们有了倒计时功能，咱们将创建一个以 1 秒的间隔运行倒计时功能的函数。

首先，咱们将创建 timerInterval 值。

let timerInterval

然后咱们将timerInterval定义为页面加载时的setInterval函数

window.addeventListener("load", () => {  startCountdown();  timerInterval = setInterval(startCountdown, 1000);});

在此方法中，咱们startCountdown()在页面加载时立即调用该函数以更新倒计时值，然后在页面加载后每 1 秒调用一次倒计时函数。

咱们还需要定义一个函数来处理倒数计时器结束时的处理。startCountdown当咱们的函数中的差异小于 1 秒时，咱们就会知道计时器已经结束。

  const startCountdown = () => {
  const now = new Date().getTime();
  const countdown = new Date(countdownDate).getTime();
 
  const difference = (countdown - now) / 1000;
 
  if (difference < 1) {
    endCountdown();
  }
   
  ...
}

这就是咱们迄今为止所拥有的！

See the Pen Countdown Timer by Envato Tuts+ (@tutsplus) on CodePen.

6.倒计时结束时

咱们目前所拥有的一直在无限期地倒计时，这显然不是很有用，所以让咱们来补救一下。

在咱们的endCountdown()函数中，咱们将停止间隔函数，删除计时器并显示内容部分。

const endCountdown = () => {
  clearInterval(timerInterval);
  timer.remove();
  content.classList.add("visible");
}

咱们将以 css 中的可见类为目标来处理显示内容。在这个演示中，当内容显示时，咱们有一个文本缩放和背景颜色变化动画，这也是用 CSS 处理的。当然，这纯粹是为了演示目的——你可以随心所欲地设计东西。

#content h1 {
  font-size: 10vmax;
  transform: scale(1.25);
}
 
#content.visible {
  opacity: 1;
  animation: colorChange 1s ease-in-out 0.5s forwards;
}
 
#content.visible h1 {
  animation: scaleOut 1s ease-in-out 0.5s forwards;
}
 
@keyframes colorChange {
  from {
    color: #fcdf00;
    background-color: #0d67ad;
  }
  to {
    color: white;
    background-color: black;
  }
}
 
@keyframes scaleOut {
  from {
    transform: scale(1.25);
  }
  to {
    transform: scale(1);
  }