|
|
51CTO旗下网站
|
|
移动端

仅用18行JavaScript构建一个倒数计时器

有时候,你会需要构建一个JavaScript倒计时时钟。你可能会有一个活动、一个销售、一个促销或一个游戏。你可以用原生的JavaScript构建一个时钟,而不是去找一个插件。

作者:张张 来源:前端全栈开发者|2020-09-16 07:39

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

  • 你的代码将是轻量级的,因为它将具有零依赖性。
  • 你的网站将表现得更好。你不需要加载外部脚本和样式表。
  • 你将拥有更多的控制权。你将会建立一个完全按照你的意愿来表现的时钟。

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

目录:

  • 1.基本时钟:倒数到特定的日期或时间
  • 2.设置有效的结束日期
  • 3.计算剩余时间
  • 4.将时间转换为可用格式
  • 5.将时钟数据输出为可重复使用的对象
  • 6.在页面上显示时钟,并在时钟为零时停止时钟
  • 7.准备展示你的时钟
    • 7.1 消除初始延迟
    • 7.2 避免不断重建时钟
    • 7.3 添加前导0
  • 8.更进一步
    • 8.1 自动调节时钟
    • 8.2 从用户到达起将计时器设置为10分钟
    • 8.3 跨页面保持时钟进度
  • 9.有关客户端时间的重要警告
  • 10.总结
  • 11.代码

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

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

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

2.设置有效的结束日期

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

ISO 8601格式:

  1. const deadline = '2015-12-31'

简短格式:

  1. const deadline = '31/12/2015'

或者,长格式:

  1. const deadline = 'December 31 2015'

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

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

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

  1. function getTimeRemaining(endtime){ 
  2.   const total = Date.parse(endtime) - Date.parse(new Date()); 
  3.   const seconds = Math.floor( (total/1000) % 60 ); 
  4.   const minutes = Math.floor( (total/1000/60) % 60 ); 
  5.   const hours = Math.floor( (total/(1000*60*60)) % 24 ); 
  6.   const days = Math.floor( total/(1000*60*60*24) ); 
  7.  
  8.   return { 
  9.     total, 
  10.     days, 
  11.     hours, 
  12.     minutes, 
  13.     seconds 
  14.   }; 

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

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

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

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

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

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

  1. 将毫秒除以1000可转换为秒:(t/1000)
  2. 将总秒数除以60,然后取余数。你不需要所有的秒,只需要计算分钟数后剩下的那些:(t/1000) % 60
  3. 四舍五入到最接近的整数。这是因为你需要完整的秒数,而不是几分之一秒:Math.floor((t/1000)%60)

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

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

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

  1. return { 
  2.   total, 
  3.   days, 
  4.   hours, 
  5.   minutes, 
  6.   seconds 
  7. }; 

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

  1. getTimeRemaining(deadline).minutes 

方便吧?

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

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

  1. <div id="clockdiv"></div> 
 

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

  1. function initializeClock(id, endtime) { 
  2.   const clock = document.getElementById(id); 
  3.   const timeinterval = setInterval(() => { 
  4.     const t = getTimeRemaining(endtime); 
  5.     clock.innerHTML = 'days: ' + t.days + '<br>' + 
  6.                       'hours: '+ t.hours + '<br>' + 
  7.                       'minutes: ' + t.minutes + '<br>' + 
  8.                       'seconds: ' + t.seconds; 
  9.     if (t.total <= 0) { 
  10.       clearInterval(timeinterval); 
  11.     } 
  12.   },1000); 

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

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

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

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

initializeClock('clockdiv', deadline);

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

7.准备展示你的时钟

在设置时钟样式之前,我们需要进行一些改进。

  • 消除初始延迟,使你的时钟立即显示。
  • 让时钟脚本更有效率,这样它就不会连续重建整个时钟。
  • 根据需要添加前导零。

7.1 消除初始延迟

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

让我们将传递给 setInterval 的匿名函数移到其自己的单独函数中,我们可以将此函数命名为 updateClock。在 setInterval 外调用一次 updateClock 函数,然后在 setInterval 内再次调用。

在你的JavaScript中,替换这个

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

新代码

  1. function updateClock(){ 
  2.   const t = getTimeRemaining(endtime); 
  3.   clock.innerHTML = 'days: ' + t.days + '<br>' + 
  4.                     'hours: '+ t.hours + '<br>' + 
  5.                     'minutes: ' + t.minutes + '<br>' + 
  6.                     'seconds: ' + t.seconds; 
  7.   if (t.total <= 0) { 
  8.     clearInterval(timeinterval); 
  9.   } 
  10.  
  11. updateClock(); // 首先运行一函数能以避免延迟 
  12. var timeinterval = setInterval(updateClock,1000); 

7.2 避免不断重建时钟

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

这是HTML:

  1. <div id="clockdiv"
  2.     Days: <span class="days"></span><br> 
  3.     Hours: <span class="hours"></span><br> 
  4.     Minutes: <span class="minutes"></span><br> 
  5.     Seconds: <span class="seconds"></span> 
  6. </div> 

现在让我们参考这些元素。在定义 clock 变量的位置之后添加以下代码

  1. const daysSpan = clock.querySelector('.days'); 
  2. const hoursSpan = clock.querySelector('.hours'); 
  3. const minutesSpan = clock.querySelector('.minutes'); 
  4. const secondsSpan = clock.querySelector('.seconds'); 

接下来,我们需要修改 updateClock 函数,使其只更新数字。新的代码是这样的:

  1. function updateClock(){ 
  2.     const t = getTimeRemaining(endtime); 
  3.  
  4.     daysSpan.innerHTML = t.days; 
  5.     hoursSpan.innerHTML = t.hours; 
  6.     minutesSpan.innerHTML = t.minutes; 
  7.     secondsSpan.innerHTML = t.seconds; 
  8.  
  9.     ... 

7.3 添加前导0

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

例如,要在“seconds”值上添加前导零,你可以更改以下设置:

  1. secondsSpan.innerHTML = t.seconds; 

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

如果你愿意,你也可以在分钟和小时的前面加零。如果你已经走到这一步,恭喜你!你的时钟现在已经可以显示了。

8.更进一步

以下示例演示了如何为某些用例扩展时钟。它们都是基于上面的基本例子。

8.1 自动调节时钟

假设我们想让时钟在特定的日子出现,而不是在其他的日子。例如,我们可能有一系列事件即将发生,而不希望每次都手动更新时钟。以下是如何提前安排事情的方法。

通过在CSS中将其 display 属性设置为 none 来隐藏时钟,然后将以下内容添加到 initializeClock 函数中(以 var clock 开头的行之后)。这将导致只有在调用 initializeClock 函数后才会显示时钟:

  1. clock.style.display = 'block'

接下来,我们可以指定显示时钟的日期。这将替换截止日期变量( deadline ):

  1. const schedule = [ 
  2.     ['Jul 25 2015''Sept 20 2015'], 
  3.     ['Sept 21 2015''Jul 25 2016'], 
  4.     ['Jul 25 2016''Jul 25 2030'
  5. ]; 

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

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

  1. // 遍历schedule中的每个元素 
  2. schedule.forEach(([startDate, endDate]) => { 
  3.   // 以毫秒为单位放置日期以便于比较 
  4.   const startMs = Date.parse(startDate); 
  5.   const endMs = Date.parse(endDate); 
  6.   const currentMs = Date.parse(new Date()); 
  7.  
  8.   // 如果当前日期在开始日期和结束日期之间,则显示时钟 
  9.   if (endMs > currentMs && currentMs >= startMs ) { 
  10.     initializeClock('clockdiv', endDate); 
  11.   } 
  12. }); 

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

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

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

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

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

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

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

8.3 跨页面保持时钟进度

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

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

这是逻辑:

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

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

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

  1. let deadline; 
  2.  
  3. // 如果有一个名为myClock的cookie,则使用该值作为截止日期 
  4. if(document.cookie && document.cookie.match('myClock')){ 
  5.   // 从Cookie获取截止日期值 
  6.   deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2]; 
  7. else { 
  8.   // 否则,请设置从现在开始10分钟的截止日期, 
  9.   // 将其保存在具有该名称的cookie中 
  10.  
  11.   // 创建从现在开始10分钟的截止日期 
  12.   const timeInMinutes = 10; 
  13.   const currentTime = Date.parse(new Date()); 
  14.   deadline = new Date(currentTime + timeInMinutes*60*1000); 
  15.  
  16.   // 将截止日期存储在cookie中以供将来引用 
  17.   document.cookie = 'myClock=' + deadline + '; path=/; domain=.yourdomain.com'

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

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

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

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

10.总结

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

下一步是什么?

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

11.代码

本示例代码和演示地址:https://coding.zhangbing.site/view.html?url=./list/down-click.html


本文转载自微信公众号「前端全栈开发者」,可以通过以下二维码关注。转载本文请联系前端全栈开发者公众号。

【编辑推荐】

  1. 这 6 点知识让我对 JavaScript 的对象有了更进一步的了解
  2. 8月份Github上热门的JavaScript开源项目排行
  3. 5分钟即可掌握的前端高效利器:JavaScript策略模式
  4. 关于 JavaScript 错误处理的最完整指南(上半部)
  5. 关于 JavaScript 错误处理的最完整指南(下半部)
【责任编辑:武晓燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

5人订阅学习

数据中心和VPDN网络建设案例

数据中心和VPDN网络建设案例

漫画+案例
共20章 | 捷哥CCIE

171人订阅学习

搭建数据中心实验Lab

搭建数据中心实验Lab

实验平台Datacenter
共5章 | ITGO(老曾)

108人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微