在仅18行JavaScript中构建倒计时计时器

构建JavaScript倒计时时钟有时是必要的，无论是活动、促销还是游戏。您可以使用原生JavaScript构建时钟，而无需依赖任何插件。虽然有很多优秀的时钟插件，但使用原生JavaScript具有以下优势：

• 代码轻量级，零依赖。
• 网站性能更好，无需加载外部脚本和样式表。
• 拥有更多控制权，您可以精确控制时钟的行为，而无需尝试弯曲插件以符合您的需求。

以下是如何用短短18行JavaScript代码创建自己的倒计时时钟：

欲深入了解JavaScript，请阅读我们的书籍《JavaScript: Novice to Ninja, 2nd Edition》。

关键要点

• 您可以使用JavaScript构建轻量级且高效的倒计时时钟，无需任何依赖项，从而提供更好的性能和控制，而无需加载外部脚本和样式表。
• 此过程包括设置有效的结束日期、计算剩余时间、将时间转换为可用格式、将时钟数据输出为可重用的对象，以及在页面上显示时钟，并在达到零时停止它。
• 您可以通过删除初始延迟、仅更新时钟中的数字以提高脚本效率以及根据需要添加前导零来优化时钟显示效果。
• 对于某些用例，可以扩展时钟，例如自动调度时钟、在用户到达时为特定时间设置计时器以及通过将时钟的结束时间保存在cookie中来跨页面维护时钟进度。
• 需要记住一个重要的警告：JavaScript日期和时间取自用户的计算机，这意味着用户可以通过更改其计算机上的时间来影响JavaScript时钟。在极其敏感的情况下，可能需要从服务器获取时间。

基本时钟：倒计时到特定日期或时间

创建基本时钟涉及以下步骤：

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

设置有效的结束日期

首先，您需要设置一个有效的结束日期。这应该是一个字符串，可以使用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';

您可以在本文中阅读更多关于JavaScript日期格式的信息。

计算剩余时间

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

const deadline = '2015-12-31';

首先，我们创建一个变量total来保存截止日期之前的剩余时间。Date.parse()函数将时间字符串转换为以毫秒为单位的值。这允许我们从彼此中减去两个时间并获得两者之间的时间量。

const deadline = '31/12/2015';

将时间转换为可用格式

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

const deadline = 'December 31 2015';

让我们分解一下这里发生了什么。

1. 将毫秒除以1000转换为秒：(t/1000)
2. 将总秒数除以60并获取余数。您不需要所有秒数，只需要计算分钟后剩余的秒数：(t/1000) % 60
3. 将其四舍五入到最接近的整数。这是因为您需要完整的秒数，而不是秒数的小数部分：Math.floor( (t/1000) % 60 )

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

将时钟数据输出为可重用的对象

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

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

方便吧？

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

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

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

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

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

此函数采用两个参数。它们是包含我们时钟的元素的id和倒计时的结束时间。在函数内部，我们将声明一个clock变量并使用它来存储对我们的时钟容器div的引用。这意味着我们不必不断查询DOM。

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

• 计算剩余时间。
• 将剩余时间输出到我们的div。
• 如果剩余时间达到零，则停止时钟。

此时，唯一剩下的步骤是运行时钟，如下所示：

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

恭喜！您现在只需18行JavaScript代码即可拥有一个基本时钟。

准备显示您的时钟

在设置时钟样式之前，我们需要稍微改进一下。

• 删除初始延迟，以便您的时钟立即显示。
• 使时钟脚本更高效，以便它不会连续重建整个时钟。
• 根据需要添加前导零。

删除初始延迟

在时钟中，我们使用setInterval每秒更新显示。这在大多数情况下都没问题，但在开始时，将有一秒钟的延迟。要删除此延迟，我们必须在间隔开始之前更新一次时钟。

让我们将传递给setInterval的匿名函数移到它自己的单独函数中。我们可以将此函数命名为updateClock。在setInterval之外调用一次updateClock函数，然后在setInterval内部再次调用它。这样，时钟就会在没有延迟的情况下显示出来。

在您的JavaScript中，替换以下内容：

const deadline = '2015-12-31';

使用以下内容：

const deadline = '31/12/2015';

避免连续重建时钟

我们需要使时钟脚本更高效。我们希望只更新时钟中的数字，而不是每秒重建整个时钟。实现此目的的一种方法是将每个数字放在一个<span></span>标签内，并且只更新这些<span></span>的内容。

这是HTML：

const deadline = 'December 31 2015';

现在让我们获取对这些元素的引用。在定义clock变量之后添加以下代码

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

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

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

添加前导零

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

例如，要向“seconds”值添加前导零，您将更改以下内容：

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

为此：

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

如果您愿意，也可以向分钟和小时添加前导零。如果您走到这一步，恭喜！您的时钟现在可以显示了。

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

更进一步

以下示例演示了如何针对某些用例扩展时钟。它们都基于上面看到的基本示例。

自动调度时钟

假设我们希望时钟在某些日子显示，而在其他日子不显示。例如，我们可能有一系列即将到来的活动，并且不想每次都手动更新时钟。以下是如何提前安排事情。

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

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

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

const deadline = '2015-12-31';

schedule数组中的每个元素都表示一个开始日期和一个结束日期。如上所述，可以包含时间和时区，但我在这里使用普通日期以保持代码的可读性。

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

const deadline = '31/12/2015';

现在，您可以提前安排时钟，而无需手动更新它。您可以根据需要缩短代码。为了可读性，我使我的代码冗长。

在用户到达时设置10分钟的计时器

可能需要在用户到达或开始特定任务后为给定时间量设置倒计时。我们将在这里设置一个10分钟的计时器，但您可以使用任何您想要的时间量。

我们只需要用以下内容替换deadline变量：

const deadline = 'December 31 2015';

此代码获取当前时间并添加十分钟。值转换为毫秒，因此可以将它们加在一起并转换为新的截止日期。

现在我们有一个时钟，它从用户到达时开始倒计时十分钟。随意尝试不同的时间长度。

跨页面维护时钟进度

有时需要保存时钟的状态，而不仅仅是当前页面。如果我们想在整个网站上设置一个10分钟的计时器，我们不希望它在用户转到不同的页面时重置。

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

这是逻辑：

1. 如果在cookie中记录了截止日期，则使用该截止日期。
2. 如果cookie不存在，则设置新的截止日期并将其存储在cookie中。

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

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

此代码使用了cookie和正则表达式，两者都是各自的单独主题。因此，我不会在这里详细介绍。需要注意的一点是，您需要将.yourdomain.com更改为您实际的域名。

关于客户端时间的另一个重要警告

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

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

总结

在完成本文中的示例后，您现在知道如何仅使用少量原生JavaScript代码创建自己的倒计时计时器！我们已经了解了如何制作基本的倒计时时钟并高效地显示它。我们还介绍了一些有用的附加功能，包括调度、绝对时间与相对时间以及使用cookie在页面和网站访问之间保存状态。

接下来的步骤

尝试使用您的时钟代码。尝试添加一些创意样式或新功能（例如暂停和恢复按钮）。之后，如果您想分享任何很酷的时钟示例，请在论坛上告诉我们。

关于在JavaScript中使用时间和日期的常见问题

如何在JavaScript中获取当前日期和时间？您可以使用Date对象获取当前日期和时间。只需创建一个没有参数的Date的新实例，它将表示当前日期和时间。

JavaScript中常见的日期和时间操作有哪些？常见的操作包括格式化日期、解析日期字符串、计算时间间隔、添加或减去时间以及比较日期。

在JavaScript中处理时区的推荐方法是什么？最好尽可能使用UTC时间来避免时区问题。当向用户显示时间时，请考虑使用toLocaleString方法以及使用timeZone选项指定所需的时区。

如何在JavaScript中计算两个日期之间的差值？您可以减去两个Date对象以获得以毫秒为单位的时间间隔，然后使用数学运算将其转换为天、小时、分钟等。

我可以在JavaScript中轻松操作日期吗？是的，JavaScript提供了一些方法来向日期添加和减去时间间隔。Date对象具有setFullYear、setMonth、setDate等方法，用于日期操作。

以上是在仅18行JavaScript中构建倒计时计时器的详细内容。更多信息请关注PHP中文网其他相关文章！