在JavaScript中建立倒数计时器

Countdown timers can serve many purposes. They can communicate to a user how long they’ve been doing something or how much time until some event happens, like the launch of your new website.

倒数计时器可以有多种用途。他们可以与用户交流他们已经做了多长时间，或者直到某个事件(例如启动新网站)发生了多少时间。

In the sales and marketing context they can be used to create a sense of urgency to encourage the conversion. FOMO can be hard to beat, but building a countdown timer in pure JavaScript is easy!

在销售和市场环境中，它们可以被用来营造一种紧迫感，以鼓励这种转变。 FOMO很难被击败，但是用纯JavaScript构建倒数计时器很容易！

入门 (Getting Started)

Since we’re leveraging the power of JavaScript in it’s purest form, without any front-end libraries, there’s not a ton of bootstrapping that has to be done.

由于我们以最纯粹的形式利用JavaScript的强大功能，而没有任何前端库，因此无需进行大量引导。

All we need is a .html file with a <div> to inject the countdown timer’s output into and a <script> block that will house our code:

我们需要的是一个.html文件，其中带有<div>用于将倒数计时器的输出注入到其中，还有一个<script>块，用于容纳我们的代码：

<!DOCTYPE html>
<html>
  <body>
    <div id="countdown"></div>
    <script>
      // This is where our sweet timer code will go!
    </script>
  </body>
</html>

计算剩余时间 (Calculating the Time Remaining)

To calculate the time remaining, we need to find the difference between the current time and the time that our countdown timer will expire. One of the more notable times that we countdown to is New Year’s Day, so we’ll use the upcoming new year as our end time:

要计算剩余时间，我们需要找到当前时间与倒数计时器将要到期的时间之间的时差。我们倒计时最值得注意的时间之一是元旦，因此我们将即将到来的新年作为结束时间：

const difference = +new Date("2020-01-01") - +new Date();

The + before the new Date is shorthand to tell JavaScript to cast the object as an integer, which gives us the object’s Unix time stamp represented as microseconds since the epoch.

new Date之前的+是表示JavaScript将对象强制转换为整数的简写形式，这使我们可以将对象的Unix时间戳记为自纪元以来的微秒。

格式化为天，小时，分钟和秒 (Formatting to Days, Hours, Minutes and Seconds)

Now that we know the total number of milliseconds until the countdown time expires, we need to convert the number of milliseconds to something a bit more friendly and human readable.

现在我们知道倒计时时间结束之前的总毫秒数，我们需要将毫秒数转换为更友好和更易读的内容。

We’re going to calculate the total number of hours, minutes and of course, seconds, by doing some math and using the modulus % operator:

我们将通过做一些数学运算并使用模数%运算符来计算小时，分钟和当然秒数的% ：

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),
};

By rounding the numbers down, we’re able to drop the remainder to get the whole number value.

通过将数字四舍五入，我们可以舍去余数以获得整数值。

With an object full of the days, hours, minutes and seconds remaining, we can put things together into a string:

在剩余了几天，几小时，几分钟和几秒钟的对象的情况下，我们可以将所有内容放到一个字符串中：

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

在页面上显示剩余时间 (Show the Time Remaining on the Page)

With the time parts assembled into a string, we can update our <div> to contain the value:

将时间部分组装成字符串后，我们可以更新<div>以包含值：

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

自动更新计时器 (Automatically Updating the Timer)

Thus far, we’ve calculated the time difference between the current time and the time that our countdown expires. We’ve broken that time into hours, minutes and seconds, and then updated the page with the time remaining.

到目前为止，我们已经计算出当前时间与倒数计时到期时间之间的时差。我们将时间分为几小时，几分钟和几秒钟，然后用剩余时间更新了页面。

Then time stood still.

然后时间静止了。

Without additional logic to update the page periodically, the timer is stuck in place until the next time the page is loaded. Without an update, it’s hard to even describe it as a timer.

如果没有其他逻辑来定期更新页面，计时器将停留在原处，直到下次加载页面为止。如果没有更新，甚至很难将其描述为计时器。

No big deal, we can easily create an interval to run every second (or 1000ms) and update the timer’s display:

没什么大不了的，我们可以轻松地创建一个间隔来运行每秒(或1000ms)并更新计时器的显示：

setInterval(() => {
  // This is where we'd recalculate the time remaining
}, 1000);

放在一起 (Putting it All Together)

Obviously that last example was a bit lacking. That’s because it’s time to put it all together into something usable, and even add in some additional niceties like updating the timer on page load (instead of waiting for the first run of the interval) and handling things when the timer has expired:

显然，最后一个例子有点缺乏。这是因为是时候将所有这些放在一起，变成可用的东西了，甚至添加一些额外的功能，例如在页面加载时更新计时器(而不是等待间隔的第一次运行)以及在计时器到期时处理事情：

<!DOCTYPE html>
<html>
  <body>
    <div id="countdown"></div>
    <script>
      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 => {
              if (!parts[part]) return;
              return `${parts[part]} ${part}`;
            })
            .join(" ");
        }

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

      countdownTimer();
      setInterval(countdownTimer, 1000);
    </script>
  </body>
</html>

You can check a working example of this code over on CodeSandbox.

您可以在CodeSandbox上查看此代码的有效示例。

翻译自: https://www.digitalocean.com/community/tutorials/js-building-countdown-timer