有时候，你会需要构建一个JavaScript倒计时时钟。你可能会有一个活动、一个销售、一个促销或一个游戏。你可以用原生的JavaScript构建一个时钟，而不是去找一个插件。尽管有很多很棒的时钟插件，但是使用原生JavaScript可以带来以下好处：

  所以，废话不多说，下面是如何在短短的18行JavaScript中制作自己的倒计时钟。

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

  以下是创建基本时钟所需步骤的简要概述：

  2.设置有效的结束日期

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

  ISO 8601格式：

  const deadline = '2015-12-31';

  简短格式：

  const deadline = '31/12/2015';

  或者，长格式：

  const deadline = 'December 31 2015';

  这些格式中的每一种都允许你指定一个准确的时间和一个时区(或者在ISO日期的情况下指定一个与UTC的偏移)。例如：

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

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

  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/(10006060)) % 24 );

  const days = Math.floor( total/(10006060*24) );

  return {

  total,

  days,

  hours,

  minutes,

  seconds

  };

  }

  首先，我们要创建一个变量 total 以保留到截止日期为止的剩余时间。Date.parse() 函数将时间字符串转换为毫秒值，这样我们就可以将两次相减，得到中间的时间量。

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

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

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

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

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

  1. 将毫秒除以1000可转换为秒：(t/1000)

  2. 将总秒数除以60，然后取余数。你不需要所有的秒，只需要计算分钟数后剩下的那些：(t/1000) % 60

  3. 四舍五入到最接近的整数。这是因为你需要完整的秒数，而不是几分之一秒：Math.floor((t/1000)%60)

  重复此逻辑，将毫秒转换为分钟，小时和天。

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

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

  return {

  total,

  days,

  hours,

  minutes,

  seconds

  };

  这个对象允许你调用你的函数，并获得任何计算值。这是如何获取剩余分钟数的示例：

  getTimeRemaining(deadline).minutes

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

  现在我们有了一个可以吐出剩余天数、小时、分钟和秒数的函数，我们就可以建立我们的时钟了。首先，我们将创建以下HTML元素来保存时钟：

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

  时钟

  function initializeClock(id, endtime) {

  const clock = document.getElementById(id);

  const timeinterval = setInterval(() => {

  const t = getTimeRemaining(endtime);

  clock.innerHTML = 'days: ' + t.days + '

  ' +

  'hours: '+ t.hours + '

  ' +

  'minutes: ' + t.minutes + '

  ' +

  'seconds: ' + t.seconds;

  if (t.total { ... },1000);

  新代码

  function updateClock(){

  const t = getTimeRemaining(endtime);

  clock.innerHTML = 'days: ' + t.days + '

  ' +

  'hours: '+ t.hours + '

  ' +

  'minutes: ' + t.minutes + '

  ' +

  'seconds: ' + t.seconds;

  if (t.total {

  // 以毫秒为单位放置日期以便于比较

  const startMs = Date.parse(startDate);

  const endMs = Date.parse(endDate);

  const currentMs = Date.parse(new Date());

  // 如果当前日期在开始日期和结束日期之间，则显示时钟

  if (endMs > currentMs && currentMs >= startMs ) {

  initializeClock('clockdiv', endDate);

  }

  });

  现在，你可以提前安排你的时钟，而不必手动更新它。如果你愿意，你可以缩短代码。为了便于阅读，我把我的代码写得很啰嗦。

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

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

  我们需要做的就是用以下命令替换 deadline 变量：

  const timeInMinutes = 10;

  const currentTime = Date.parse(new Date());

  const deadline = new Date(currentTime + timeInMinutes601000);

  这段代码以当前时间为基准，增加10分钟。这些值将转换为毫秒js活动剩余时间倒计时，因此可以将它们加在一起并变成新的截止日期。

  现在我们有一个时钟，从用户到达时开始倒计时十分钟，你可以自由发挥，尝试不同的时间长度。

  8.3 跨页面保持时钟进度

  有时，除了当前页面外，还需要保留时钟状态。如果我们想在整个网站上设置10分钟的计时器，则我们不希望在用户转到其他页面时重置该计时器。

  一个解决方案是将时钟的结束时间保存在一个cookie中。这样一来，导航到一个新的页面就不会把结束时间重置到十分钟以后。

  这是逻辑：

  如果Cookie中记录了截止日期，使用该截止日期。

  如果不存在Cookie，请设置一个新的截止日期并将其存储在Cookie中。

  要实现这一点，请使用以下命令替换 deadline 变量：

  let deadline;

  // 如果有一个名为myClock的cookie，则使用该值作为截止日期

  if(document.cookie && document.cookie.match('myClock')){

  // 从Cookie获取截止日期值

  deadline = document.cookie.match(/(^|;)myClock=(¹+)/)[2];

  } else {

  // 否则，请设置从现在开始10分钟的截止日期，

  // 将其保存在具有该名称的cookie中

  // 创建从现在开始10分钟的截止日期

  const timeInMinutes = 10;

  const currentTime = Date.parse(new Date());

  deadline = new Date(currentTime + timeInMinutes601000);

  // 将截止日期存储在cookie中以供将来引用

  document.cookie = 'myClock=' + deadline + '; path=/; domain=.yourdomain.com';

  }

  需要注意的是，你需要将 .yourdomain.com 改为你的实际域名。

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

  JavaScript日期和时间是从用户的计算机上获取的，这意味着用户可以通过更改计算机上的时间来影响JavaScript时钟。在大多数情况下，这并不重要，但在一些超级敏感的情况下，就需要从服务器上获取时间。可以使用一些Node.js或Ajax来完成，这两者都超出了本教程的范围。

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

  10.总结

  在完成本文中的示例之后，你现在知道了如何使用几行简单的JavaScript代码创建自己的倒计时计时器!我们已经了解了如何制作一个基本的倒计时时钟并有效地显示它。我们还介绍了添加一些有用的附加功能，包括日程安排、绝对时间与相对时间，以及在页面和网站访问之间用cookie保存状态。

  下一步是什么?

  试着添加一些创意风格，或者新的功能(比如暂停和恢复按钮)。之后，如果你想出了任何很酷的时钟例子js活动剩余时间倒计时，你想分享，让我们在评论区见。

  本示例代码和演示地址：