如何在 JavaScript 中构建倒数计时器

笔记首页 >> 教程系列 >> 如何在 JavaScript 中构建倒数计时器

如何在 JavaScript 中构建倒数计时器

介绍

倒数计时器可以用于许多目的。他们可以向用户传达他们做某事的时间或距离某个事件发生的时间，例如您的新网站的发布。在销售和营销环境中，他们可以营造一种紧迫感来鼓励转换。

在本教程中，您将使用纯 JavaScript 创建一个倒数计时器。

先决条件

要完成本教程，您将需要以下内容：

您的机器上安装了最新版本的 Node。要安装 Node，请按照此如何安装 Node.js教程中概述的步骤操作。
您可以在名为How to Code in JavaScript 的系列中找到对 JavaScript 编码的基本了解

第 1 步 – 入门

由于您将以最纯粹的形式使用 JavaScript，没有任何前端库，因此无需进行太多引导。

index.html使用标准样板 HTML 起始代码创建一个文件：

索引.html

<!DOCTYPE html>
<html>
  <body>

  </body>
</html>

添加<div>内<body>。本<div>应该有一个id设置为"countdown"：

索引.html

<!DOCTYPE html>
<html>
  <body>
    <div id="countdown"></div>
  </body>
</html>

稍后，JavaScript 倒数计时器的输出将放置在此<div>. 在您的<div>,下方包含<script>标签。您的<script>标签将包含您的 JavaScript 代码：

索引.html

<!DOCTYPE html>
<html>
  <body>
    <div id="countdown"></div>
    <script>

    </script>
  </body>
</html>

准备好 HTML 后，您就可以继续使用 JavaScript 编写倒数计时器了。在下一步中，您将计算倒计时的剩余时间。

步骤 2 — 计算剩余时间

在计算剩余时间之前，创建一个名为的函数countdownTimer：

索引.html

<!DOCTYPE html>
<html>
  <body>
    <div id="countdown"></div>
    <script>
      function countdownTimer() {

      }
    </script>
  </body>
</html>

要计算剩余时间，您需要找到当前时间与倒数计时器到期时间之间的差值。在countdownTimer函数内，创建一个名为的常量变量difference。在下面的代码片段中，difference将设置为等于 2021 年元旦与当前日期之间的差值：

索引.html

function countdownTimer() {
  const difference = +new Date("2021-01-01") - +new Date();
}

new Date创建一个日期对象。在+之前的new Date简写告诉JavaScript来投的对象作为一个整数，它给你表示为自纪元以来的微秒对象的Unix时间戳。

在difference常量变量下方，创建一个名为的变量remaining。remaining将被设置为等于一条"Time's up!"消息：

索引.html

function countdownTimer() {
  const difference = +new Date("2020-01-01") - +new Date();
  let remaining = "Time's up!";
}

当您的时间用完且倒数计时器结束时，remaining将显示该消息。

倒数计时器的剩余时间已全部设置。剩余时间 (the difference) 以毫秒为单位计算。现在您需要将剩余时间格式化为天、小时、分钟和秒。

第 3 步 — 格式化为天、小时、分钟和秒

计算到倒计时时间到期之前的总毫秒数，您需要将毫秒数转换为更易读的内容。在执行此操作之前，您需要创建一个if语句：

索引.html

function countdownTimer() {
  const difference = +new Date("2020-01-01") - +new Date();
  let remaining = "Time's up!";

  if (difference > 0) {

  }
}

如果difference大于0（如果不是元旦），将执行后面的代码。

现在您可以将毫秒转换为天、小时、分钟和秒。为此，您需要进行一些除法、乘法和使用模数%运算符。

创建一个具有常量变量 name 的对象parts。对象中的键应该是 days、hours、minutes和seconds，并且相应的值应该与将毫秒转换为适当的时间单位所需的等式相匹配。下面的代码片段将显示这些等式：

索引.html

if (difference > 0) {
  const parts = {
    days: Math.floor(difference / (1000 * 60 * 60 * 24)),
    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
    minutes: Math.floor((difference / 1000 / 60) % 60),
    seconds: Math.floor((difference / 1000) % 60),
  };
}

该Math.floor函数用于向下舍入数字。有了这个，您就可以去掉余数以获得每个时间单位的整数值。

包含剩余天数、小时数、分钟数和秒数的对象需要格式化为字符串。为此，请重新分配remaining并将其设置为等于中的键数组parts。使用以下Object.keys方法执行此操作：

索引.html

if (difference > 0) {
  const parts = {
    days: Math.floor(difference / (1000 * 60 * 60 * 24)),
    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
    minutes: Math.floor((difference / 1000 / 60) % 60),
    seconds: Math.floor((difference / 1000) % 60),
  };

  remaining = Object.keys(parts)
}

remaining现在设置为等于中的键数组parts。由于remaining现在是一个数组，您可以使用该.map()方法。该.map()方法将迭代中的每个项目，remaining并允许您对每个项目执行一个功能。

索引.html


if (difference > 0) {
  const parts = {
    days: Math.floor(difference / (1000 * 60 * 60 * 24)),
    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
    minutes: Math.floor((difference / 1000 / 60) % 60),
    seconds: Math.floor((difference / 1000) % 60),
  };

  remaining = Object.keys(parts).map(part => {

  })
}

您想将每个项目转换为字符串。每个时间单位应遵循以下格式：“X 天”。part匹配时间单位。要获取实际数字，您需要对parts对象使用括号表示法。创建一个if语句，检查是否没有对应时间单位的数字。如果没有数字，添加一个return语句：

索引.html

remaining = Object.keys(parts).map(part => {
  if (!parts[part]) return;
})

如果没有对应的数字，则该.map()方法将移动到下一个时间单位并再次检查。

如果有数字，则返回数字以及时间单位。请记住，它应遵循“X 天”格式：

索引.html

remaining = Object.keys(parts).map(part => {
  if (!parts[part]) return;
  return `${parts[part]} ${part}`;
})

${parts[part]}将返回数字，而${part}将返回时间单位。现在，remaining是天数、小时数、分钟数和秒数的数组。这个数组需要是一个字符串。中的每个项目都remaining应该用空格分隔。使用以下.join(" ")方法完成此操作：

索引.html

remaining = Object.keys(parts).map(part => {
  return `${parts[part]} ${part}`;
}).join(" ");

现在，您的countdownTimer()函数将如下所示：

索引.html

function countdownTimer() {
  const difference = +new Date("2020-01-01") - +new Date();
  let remaining = "Time's up!";

  if (difference > 0) {
    const parts = {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((difference / 1000 / 60) % 60),
      seconds: Math.floor((difference / 1000) % 60),
    };
    remaining = Object.keys(parts).map(part => {
    return `${parts[part]} ${part}`;  
    }).join(" ");
  }
}

剩余时间现在被格式化为一个字符串和可以理解的时间单位。但是，剩余时间不会显示在您的页面上。为此，您需要使用 DOM 操作。

第 4 步 — 显示页面上的剩余时间

将时间部分组合成一个字符串，您可以更新您的<div>以包含该值。为此，您需要使用 DOM 操作。

在你的countdownTimer()功能，你的下面ifstatment，使用getElementByIdDOM选择引用<div>与id的"countdown"：

索引.html

function countdownTimer() {
  const difference = +new Date("2020-01-01") - +new Date();
  let remaining = "Time's up!";

  if (difference > 0) {
    const parts = {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((difference / 1000 / 60) % 60),
      seconds: Math.floor((difference / 1000) % 60),
    };
    remaining = Object.keys(parts).map(part => {
    return `${parts[part]} ${part}`;  
    }).join(" ");
  }

  document.getElementById("countdown")
}

要更改此内容<div>，您还需要使用.innerHTML附加到的属性document.getElementById("countdown")。将此 DOM 选择器设置为等于remaining：

索引.html

document.getElementById("countdown").innerHTML = remaining;

至此，countdownTimer()功能完成。调用函数让它运行：

索引.html

function countdownTimer() {
  const difference = +new Date("2020-01-01") - +new Date();
  let remaining = "Time's up!";

  if (difference > 0) {
    const parts = {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((difference / 1000 / 60) % 60),
      seconds: Math.floor((difference / 1000) % 60),
    };
    remaining = Object.keys(parts).map(part => {
    return `${parts[part]} ${part}`;  
    }).join(" ");
  }

  document.getElementById("countdown").innerHTML = remaining;
}

countDownTimer();

现在您的倒计时时间已准备好显示在您的 HTML 页面上。您可能会注意到时间没有更新。还有更多代码需要添加以确保倒数计时器自动更新。

步骤 5 — 自动更新计时器

到目前为止，您已经计算了当前时间与倒计时结束时间之间的时间差。您已将该时间分解为小时、分钟和秒，然后使用剩余时间更新页面。但是，计时器当前不会自动更新。

如果没有额外的逻辑来定期更新页面，计时器就会停留在原位，直到下一次加载页面。没有更新，很难将其描述为计时器。

这可以通过使用该setInterval方法来解决。使用该setInterval方法并传入countdownTimerand1000作为它的两个参数：

索引.html

countdownTimer();
setInterval(countdownTimer, 1000);

现在，countdownTimer将每秒（或 1000 毫秒）运行一次并更新计时器的显示。

结论

在本教程中，您使用纯 JavaScript 创建了一个倒数计时器。您使用了.map()和之类的方法setInterval。如果你想获得这些方法的更深入的知识，如何使用.map()迭代通过在JavaScript中数组项和使用计划任务中的JavaScriptsetTimeout和setInterval有帮助的。

完成这个项目后，下一步是将 React 添加到组合中。这个如何使用 React Hooks 创建倒数计时器教程是一个很好的起点。

觉得文章有用？

点个广告表达一下你的爱意吧！