仅用18行JavaScript构建一个倒数计时器

Lemon黄

发布于 2020-06-04 15:37:06

2.9K0

发布于 2020-06-04 15:37:06

文章被收录于专栏：Lemon黄Lemon黄

一、原始JavaScript可以带来以下好处

代码将是轻量级的，因为它将具有零依赖性。
网站将表现更好。无需加载外部脚本和样式表。
能拥有更多控制权。构建时钟，使其行为完全符合自己希望的方式（而不是尝试将插件弯曲符合自己的意愿）。

因此，事不宜迟，这里介绍了如何仅用18行JavaScript来制作自己的倒计时时钟。

二、基本的倒计时器：能倒数到特定的日期或时间

以下是创建基本的倒计时器所涉及步骤的快速概述：

设置有效的结束日期。
计算剩余时间。
将时间转换为可用格式。
将时钟数据输出为可重复使用的对象。
在页面上显示时钟，并在时钟为零时停止时钟。

下面我们就按如上步骤开始吧。

1. 设置有效的结束日期

首先，我们需要设置一个有效的结束日期。用JavaScript的Date.parse()的方法可以处理的任何格式的字符串。例如以下的这些时间格式：

ISO 8601格式：

const deadline = '2020-12-31';

简短格式：

const deadline = '31/12/2020';

长格式:

const deadline = 'December 31 2020';

这些格式中的每一种都允许我们指定确切的时间和时区（对于ISO日期，则为UTC的偏移量）。例如：

const deadline = 'December 31 2015 23:59:59 GMT+0200';

2. 计算剩余时间

我们需要编写一个函数，该函数需要一个表示给定的结束时间字符串（如上所述）。然后，我们计算该时间与当前时间之间的时差。该函数如下：

function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

首先，我们创建一个变量total，以存储截止到截止日期的剩余时间。该Date.parse()函数将时间字符串转换为毫秒值。截止时间和当前时间两两相减，并获得两者之间的时间差。

const total = Date.parse(endtime) - Date.parse(new Date());

3. 将时间转换为可用格式

现在，我们要将毫秒转换为天，小时，分钟和秒。让我们以秒为例：

const seconds = Math.floor( (t/1000) % 60 );

让我们分解一下这里需要处理的事情: 1) 将毫秒除以1000可转换为秒： (t/1000); 2) 将总秒数除以60，然后取余数。我们不希望显示所有的秒数，仅需要计算分钟数之后剩下的秒数：(t/1000) % 60; 3) 四舍五入到最接近的整数。这是因为我们需要完整的秒数，而不是几分之一秒：Math.floor( (t/1000) % 60 ); 重复此逻辑，将毫秒转换为分钟，小时和天。

4. 将时钟数据输出为可重复使用的对象

准备好几天，几小时，几分钟和几秒钟之后，我们现在可以将数据作为可重用的对象返回：

return {
  total,
  days,
  hours,
  minutes,
  seconds
};

该对象允许我们调用函数并获取任何计算值。以下是如何获取剩余时间的示例：

getTimeRemaining(deadline).minutes

方便吧？

5. 在页面上显示时钟，并在时钟为零时停止时钟

现在，我们有了一个可以花费剩余的天，小时，分钟和秒的功能，我们可以构建时钟了。首先，我们将创建以下HTML元素来保存时钟：

<div id="clockdiv"></div>

然后，我们将编写一个在新div中输出时钟数据的函数：

function initializeClock(id, endtime) {
  const clock = document.getElementById(id);
  const timeinterval = setInterval(() => {
    const t = getTimeRemaining(endtime);
    clock.innerHTML = '天: ' + t.days + '<br>' +
                      '小时: '+ t.hours + '<br>' +
                      '分钟: ' + t.minutes + '<br>' +
                      '秒: ' + t.seconds;
    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  },1000);
}

该函数有两个参数。这些是包含我们时钟的元素的ID，以及倒计时的结束时间。在函数内部，我们将声明一个clock变量并将其用于存储对我们的时钟容器div的引用。这意味着我们不必继续查询DOM。

接下来，我们将使用setInterval每秒执行一个匿名函数。此功能将执行以下操作：

计算剩余时间。
将剩余时间输出到我们的div。
如果剩余时间为零，请停止计时。

此时，剩下的唯一步骤是像这样运行时钟：

initializeClock('clockdiv', deadline);

三、准备显示始终

在设置时钟样式之前，我们需要进行一些细化。

消除初始延迟，使您的时钟立即显示。
提高时钟脚本的效率，以免持续重建整个时钟。
根据需要添加前导零。

1.消除初始延迟，使您的时钟立即显示

在时钟中，我们习惯于setInterval每秒更新一次显示。多数情况下，这很好，除非在开始时会有一秒钟的延迟。要消除此延迟，我们必须在间隔开始之前更新一次时钟。让我们将要传递给setInterval它的匿名函数移到其自己的独立函数中。我们可以命名这个函数updateClock。在updateClock外部调用该函数setInterval，然后在内部再次调用setInterval。这样，时钟显示就没有延迟了。在JavaScript中，替换为：

const timeinterval = setInterval(() => { ... },1000);

于是updateClock函数如下:

function updateClock(){
  const t = getTimeRemaining(endtime);
  clock.innerHTML = '天: ' + t.days + '<br>' +
                    '时: '+ t.hours + '<br>' +
                    '分: ' + t.minutes + '<br>' +
                    '秒: ' + t.seconds;
  if (t.total <= 0) {
    clearInterval(timeinterval);
  }
}

updateClock(); // 第一次运行消除初始延迟
var timeinterval = setInterval(updateClock,1000);

2.提高时钟脚本的效率，以免持续重建整个时钟

我们需要使时钟脚本更高效。我们只想更新时钟中的数字，而不是每秒重新构建整个时钟。实现此目的的一种方法是将每个数字放在span标签中，然后仅更新这些跨度的内容。

以下是HTML：

<div id="clockdiv">
    天: <span class="days"></span><br>
    时: <span class="hours"></span><br>
    分: <span class="minutes"></span><br>
    秒: <span class="seconds"></span>
</div>

现在让我们参考这些元素。在clock定义变量的位置之后添加以下代码

const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');

接下来，我们需要更改updateClock功能以仅更新数字。新代码如下所示：

function updateClock(){
    const t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = t.hours;
    minutesSpan.innerHTML = t.minutes;
    secondsSpan.innerHTML = t.seconds;

    ...
}

3.根据需要添加前导零

现在时钟不再每秒都在重建，我们还有另一件事要做：添加前导零。例如，不是让时钟显示7秒，而是显示07秒。一种简单的方法是在数字的开头添加字符串“ 0”，然后切掉最后两位数字。例如，要在“ seconds”值上添加前导零，您可以对此进行更改：

secondsSpan.innerHTML = t.seconds;

改成：

secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

如果需要，我们也可以在分钟和小时中添加前导零。如果你已走到这里，恭喜！我们的时钟现在可以显示了。

四、效果图

五、源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时时钟</title>
    <style>
        body {
            text-align: center;
            background: #00ECB9;
            font-family: sans-serif;
            font-weight: 100;
        }

        h1 {
            color: #396;
            font-weight: 100;
            font-size: 40px;
            margin: 40px 0px 20px;
        }

        #clockdiv {
            font-family: sans-serif;
            color: #fff;
            display: inline-block;
            font-weight: 100;
            text-align: center;
            font-size: 30px;
        }

        #clockdiv>div {
            padding: 10px;
            border-radius: 3px;
            background: #00BF96;
            display: inline-block;
        }

        #clockdiv div>span {
            padding: 15px;
            border-radius: 3px;
            background: #00816A;
            display: inline-block;
        }

        .smalltext {
            padding-top: 5px;
            font-size: 16px;
        }
</style>
</head>

<body>
    <h1>倒计时时钟</h1>
    <div id="clockdiv">
        <div>
            <span class="days"></span>
            <div class="smalltext">天</div>
        </div>
        <div>
            <span class="hours"></span>
            <div class="smalltext">时</div>
        </div>
        <div>
            <span class="minutes"></span>
            <div class="smalltext">分</div>
        </div>
        <div>
            <span class="seconds"></span>
            <div class="smalltext">秒</div>
        </div>
    </div>
</body>
<script>
    function getTimeRemaining(endtime) {
        const total = Date.parse(endtime) - Date.parse(new Date());
        const seconds = Math.floor((total / 1000) % 60);
        const minutes = Math.floor((total / 1000 / 60) % 60);
        const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
        const days = Math.floor(total / (1000 * 60 * 60 * 24));

        return {
            total,
            days,
            hours,
            minutes,
            seconds
        };
    }

    function initializeClock(id, endtime) {
        const clock = document.getElementById(id);
        const daysSpan = clock.querySelector('.days');
        const hoursSpan = clock.querySelector('.hours');
        const minutesSpan = clock.querySelector('.minutes');
        const secondsSpan = clock.querySelector('.seconds');

        function updateClock() {
            const t = getTimeRemaining(endtime);

            daysSpan.innerHTML = t.days;
            hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
            minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
            secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

            if (t.total <= 0) {
                clearInterval(timeinterval);
            }
        }

        updateClock();
        const timeinterval = setInterval(updateClock, 1000);
    }

    const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
    initializeClock('clockdiv', deadline);
</script>

</html>

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-06-02，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

编程算法

本文分享自 Lemon黄微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

编程算法

登录后参与评论

0 条评论

热度