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

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

---

有时，您将需要构建一个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 );