18行JavaScript代码构建一个倒数计时器

骑猪看日落 2023-02-14 15:38 14阅读 0赞

# 18行JavaScript代码构建一个倒数计时器 #

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70]  
有时，您将需要构建一个JavaScript倒数时钟。您可能有活动，销售，促销或游戏。您可以使用原始JavaScript构建时钟，而不用寻找最近的插件。虽然有很多很棒的时钟插件，但是使用原始JavaScript可以带来以下好处：

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

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

## 基本时钟：倒数到特定的日期或时间 ##

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

## 设定有效的结束日期 ##

首先，您需要设置一个有效的结束日期。这应该是JavaScript的`Date.parse()`方法可以解析的任何格式的字符串。例如：

1、在ISO 8601格式：

const deadline = '2015-12-31';

2、简短格式：

const deadline = '31/12/2015';

3、或者，长格式：

const deadline = 'December 31 2015';

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

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

## 计算剩余时间 ##

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

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());

### 将时间转换为可用格式 ###

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

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

让我们分解一下这里发生的事情。

*  将毫秒除以1000可转换为秒：`(t/1000)`
 *  将总秒数除以60，然后取余数。您不希望所有的秒数，仅需要计算分钟数之后剩下的秒数：`(t/1000) % 60`
 *  四舍五入到最接近的整数。这是因为您需要完整的秒数，而不是几分之一秒：`Math.floor( (t/1000) % 60 )`  
    重复此逻辑，将毫秒转换为分钟，小时和天。

### 输出时钟数据作为可重用对象 ###

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

getTimeRemaining(deadline).minutes

### 显示时钟并在达到零时停止 ###

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

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

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

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

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

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

initializeClock('clockdiv', deadline);

恭喜你！现在，您仅用18行JavaScript就拥有了一个基本时钟。

## 准备显示时钟 ##

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

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

### 消除初始延迟 ###

在时钟中，我们习惯于`setInterval`每秒更新一次显示。多数情况下，这很好，除非在开始时会有一秒钟的延迟。要消除此延迟，我们必须在间隔开始之前更新一次时钟。

让我们将要传递给`setInterval`它的匿名函数移到其自己的独立函数中。我们可以命名这个函数`updateClock`。在`updateClock`外部调用该函数`setInterval`，然后在内部再次调用`setInterval`。这样，时钟显示就没有延迟了。

在您的JavaScript中，替换为：

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

有了这个：

function updateClock(){
        
      const t = getTimeRemaining(endtime);
      clock.innerHTML = 'days: ' + t.days + '<br>' +
                        'hours: '+ t.hours + '<br>' +
                        'minutes: ' + t.minutes + '<br>' +
                        'seconds: ' + t.seconds;
      if (t.total <= 0) {
        
        clearInterval(timeinterval);
      }
    }
    
    updateClock(); // run function once at first to avoid delay
    var timeinterval = setInterval(updateClock,1000);

### 避免持续重建时钟 ###

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

这是HTML：

<div id="clockdiv">
        Days: <span class="days"></span><br>
        Hours: <span class="hours"></span><br>
        Minutes: <span class="minutes"></span><br>
        Seconds: <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;
    
        ...
    }

### 添加前导零 ###

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

例如，要在“ seconds”值上添加前导零，您可以对此进行更改：

secondsSpan.innerHTML = t.seconds;

对此：

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

如果需要，您也可以在分钟和小时中添加前导零。如果您走了这么远，恭喜！您的时钟现在可以显示了。

**注意**：您可能需要在CodePen中单击“重新运行”才能开始倒计时。

## 自动安排时钟 ##

假设我们希望时钟显示在某些日子，而不是其他日子。例如，我们可能会发生一系列事件，并且不想每次都手动更新时钟。这是提前安排事情的方法。

通过在CSS中将其`display`属性设置为隐藏时钟`none`。然后将以下内容添加到`initializeClock`函数中（以开头的行之后`var clock`）。一旦`initializeClock`调用此函数，这将导致时钟仅显示：

clock.style.display = 'block';

接下来，我们可以指定显示时钟的日期。这将替换`deadline`变量：

const schedule = [
        ['Jul 25 2015', 'Sept 20 2015'],
        ['Sept 21 2015', 'Jul 25 2016'],
        ['Jul 25 2016', 'Jul 25 2030']
    ];

`schedule`数组中的每个元素代表一个开始日期和一个结束日期。如上所述，可以包括时间和时区，但是我在这里使用了简单的日期来保持代码的可读性。

最后，当用户加载页面时，我们需要检查是否在指定的时间范围内。该代码应替换先前对该`initializeClock`函数的调用。

// iterate over each element in the schedule
    for (var i=0; i<schedule.length; i++) {
        
      var startDate = schedule[i][0];
      var endDate = schedule[i][1];
    
      // put dates in milliseconds for easy comparisons
      var startMs = Date.parse(startDate);
      var endMs = Date.parse(endDate);
      var currentMs = Date.parse(new Date());
    
      // if current date is between start and end dates, display clock
      if (endMs > currentMs && currentMs >= startMs ) {
        
        initializeClock('clockdiv', endDate);
      }
    }
    
    schedule.forEach(([startDate, endDate]) => {
        
      // put dates in milliseconds for easy comparisons
      const startMs = Date.parse(startDate);
      const endMs = Date.parse(endDate);
      const currentMs = Date.parse(new Date());
    
      // if current date is between start and end dates, display clock
      if (endMs > currentMs && currentMs >= startMs ) {
        
        initializeClock('clockdiv', endDate);
      }
    });

现在，您可以提前安排时钟，而无需手动更新。您可以根据需要缩短代码。为了便于阅读，我让我变得冗长。

## 从用户到达起将计时器设置为10分钟 ##

用户到达或开始特定任务后，有必要在给定的时间内设置倒计时。我们将在此处将计时器设置为10分钟，但是您可以使用任意时间。

我们需要做的就是`deadline`用这个替换变量：

const timeInMinutes = 10;
    const currentTime = Date.parse(new Date());
    const deadline = new Date(currentTime + timeInMinutes*60*1000);

该代码将花费当前时间，并增加十分钟。这些值将转换为毫秒，因此可以将它们加在一起并变成新的截止日期。

现在，我们有了一个时钟，可以从用户到达时开始倒数十分钟。随意玩耍，尝试不同的时间长度。

## 跨页面保持时钟进度 ##

有时，有必要将时钟状态保留的时间不仅限于当前页面。如果我们要在整个网站上设置10分钟的计时器，则我们不希望在用户转到其他页面时重置该计时器。

一种解决方案是将时钟的结束时间保存在cookie中。这样，导航到新页面不会将结束时间重置为现在的十分钟。

这是逻辑：

*  如果Cookie中记录了截止日期，请使用该截止日期。
 *  如果不存在该cookie，则设置一个新的截止日期并将其存储在cookie中。

要实现这一点，请用`deadline`以下内容替换变量：

let deadline;
    
    // if there's a cookie with the name myClock, use that value as the deadline
    if(document.cookie && document.cookie.match('myClock')){
        
      // get deadline value from cookie
      deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2];
    } else {
        
      // otherwise, set a deadline 10 minutes from now and 
      // save it in a cookie with that name
    
      // create deadline 10 minutes from now
      const timeInMinutes = 10;
      const currentTime = Date.parse(new Date());
      deadline = new Date(currentTime + timeInMinutes*60*1000);
    
      // store deadline in cookie for future reference
      document.cookie = 'myClock=' + deadline + '; path=/; domain=.yourdomain.com';
    }

这段代码利用了`cookie`和`正则表达式`，它们本身就是单独的主题。因此，我在这里不再赘述。需要注意的一件事是，您需要更改`yourdomain.com`为实际域。

## 有关客户端时间的重要警告 ##

avaScript日期和时间是从用户计算机中获取的。这意味着用户可以通过更改计算机上的时间来影响JavaScript时钟。在大多数情况下，这无关紧要。但是，在某些超级敏感的情况下，有必要从服务器获取时间。可以使用一些PHP或Ajax来完成，这两者都超出了本教程的范围。

从服务器获取时间后，我们可以使用本教程中的相同技术来使用它。

## 总结 ##

在阅读完本文中的示例之后，您现在知道如何仅用几行原始JavaScript代码创建自己的倒数计时器！我们已经研究了如何制作基本的倒数时钟并有效显示它。我们还介绍了添加一些有用的附加功能，包括计划，绝对时间和相对时间，以及使用Cookie保留页面和站点访问之间的状态。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200603153027431.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ==,size_16,color_FFFFFF,t_70