有时候,您需要构建一个 JavaScript 倒计时时钟。您可能有活动、促销、促销或游戏。您可以使用原始 JavaScript 构建时钟,而不是使用最近的插件。虽然有很多很棒的时钟插件,但以下是使用原始 JavaScript 可以获得的好处:
- 您的代码将是轻量级的,因为它将具有零依赖性。
- 您的网站会表现得更好。您不需要加载外部脚本和样式表。
- 你会有更多的控制权。您将构建时钟以完全按照您想要的方式运行(而不是试图根据您的意愿弯曲插件)。
因此,事不宜迟,以下是如何用 18 行 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 中日期格式的更多信息。
计算剩余时间
下一步是计算剩余时间。我们需要编写一个函数,该函数接受一个表示给定结束时间的字符串(如上所述)。然后我们计算该时间与当前时间之间的差异。看起来是这样的:
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 );
让我们分解这里发生的事情。
-
<