有时，您需要构建一个JavaScript倒计时钟。你可能有活动，销售，促销或游戏。您可以使用原始的JavaScript来构建时钟，而无需寻找最近的插件。虽然有很多很棒的时钟插件，但是使用原始的JavaScript可以带来以下好处:

因此，不再拖延，本文介绍如何只用18行JavaScript就能制作自己的倒计时钟。

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

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

在ISO 8601格式中:

const deadline = & # 392015-12-31'； 短格式:

const deadline = & # 3931/12/2015'； 或者，长格式:

const deadline = & # 392015年1 2月31日& # 39；； 每种格式都允许您指定准确的时间和时区(ISO日期的UTC偏移量)。示例:

const deadline = & # 392015年1 2月31日23:59:59 GMT+0200 & # 39；； 在本文中，您可以阅读更多关于JavaScript中日期格式的内容。

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

函数gettime remaining(end time){ const total = Date . parse(end time)-Date . parse(new Date())； const seconds = math . floor((total/1000)% 60)； const minutes = math . floor((total/1000/60)% 60)； const hours = Math.floor((合计/(1000 * 60 * 60))% 24)； const days = math . floor(total/(1000 * 60 * 60 * 24))； return { 总计， 天， 小时， 分钟， 秒 }； } 首先，我们创建一个变量total来保存截止日期前的剩余时间。函数的作用是:将时间字符串转换成毫秒值。这使得我们可以减去两次，得到两次之间的时间。

const total = Date . parse(end time)-Date . parse(new Date())； 将时间转换成可用格式现在，我们将毫秒转换成天、小时、分钟和秒。让我们以秒为例:

const秒= math . floor((t/1000)% 60)； 我们来分解一下这里发生了什么。

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

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

return { 总计， 天， 小时， 分钟， 秒 }； 这个对象允许您调用函数并获取任何计算值。这是一个如何获得剩余时间的示例:

获取剩余时间(截止日期)。分钟 方便吗？

现在，我们有了一个函数，可以用剩下的日子，小时，分钟和秒，我们可以建立时钟。首先，我们将创建以下HTML元素来保存时钟:

& ltdiv id = & # 34clockdiv & # 34& gt& lt/div & gt； 然后，我们将编写一个函数在新的div中输出时钟数据:

函数initializeClock(id，end time){ const clock = document . getelementbyid(id)； const time interval = setInterval(()= & gt；{ const t = gettime remaining(end time)； clock . innerhtml = & # 39；天数:& # 39；+t . days+& # 39；& ltbr & gt'+ & # 39；小时:& # 39；+t . hours+& # 39；& ltbr & gt'+ & # 39；分钟数:& # 39；+ t分钟+& # 39；& ltbr & gt'+ & # 39；秒:& # 39；+ t .秒； if(t . total & lt；= 0){ clearInterval(time interval)； } }，1000)； } 这个函数有两个参数。这些是包含我们时钟的元素的id，以及倒计时的结束时间。在函数内部，我们将声明一个时钟变量，并使用它来存储对时钟容器div的引用。这意味着我们不必继续查询DOM。

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

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

initialize clock(& # 39；clockdiv & # 39，截止日期)； 恭喜！现在，您有了一个只有18行JavaScript的基本时钟。

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

在时钟中，我们习惯于按setInterval每秒更新一次显示。在大多数情况下，这是好的，除非在开始时有一秒钟的延迟。为了消除这种延迟，我们必须在间隔开始之前更新一次时钟。

让我们把要传递给setInterval的匿名函数移到它自己的独立函数中。我们可以将这个函数命名为updateClock。在updateClock外部调用函数setInterval，然后在内部再次调用setInterval。这样，时钟显示没有延迟。

在您的JavaScript中，将其替换为:

const time interval = setInterval(()= & gt；{ ...},1000); 用这个:

函数update clock(){ const t = gettime remaining(end time)； clock . innerhtml = & # 39；天数:& # 39；+t . days+& # 39；& ltbr & gt'+ & # 39；小时:& # 39；+t . hours+& # 39；& ltbr & gt'+ & # 39；分钟数:& # 39；+ t分钟+& # 39；& ltbr & gt'+ & # 39；秒:& # 39；+ t .秒； if(t . total & lt；= 0){ clearInterval(time interval)； } } update clock()；//一开始运行一次函数避免延迟 var time interval = setInterval(update clock，1000)； 避免持续重建时钟我们需要让时钟脚本更高效。我们只想更新时钟中的数字，而不是每秒重建整个时钟。一种方法是将每个数字放在span标记中，然后只更新这些span的内容。

这是HTML:

& ltdiv id = & # 34clockdiv & # 34& gt 天:& ltspan class = & # 34天& # 34；& gt& lt/span>。& ltbr & gt 小时数:& ltspan class = & # 34小时& # 34；& gt& lt/span>。& ltbr & gt 分钟:& ltspan class = & # 34分钟& # 34；& gt& lt/span>。& ltbr & gt 秒:& ltspan class = & # 34秒& # 34；& gt& lt/span>。 & lt；/div & gt； 现在我们来参考一下这些元素。在clock定义变量的位置后添加下面的代码

const days span = clock . query selector(& # 39；。天& # 39；); const hours span = clock . query selector(& # 39；。小时& # 39；); const minutes span = clock . query selector(& # 39；。分钟& # 39；); const seconds span = clock . query selector(& # 39；。秒& # 39；); 接下来，我们需要更改updateClock函数，更新数字。新代码如下:

函数update clock(){ const t = gettime remaining(end time)； days span . innerhtml = t . days； hours span . innerhtml = t . hours； minutes span . innerhtml = t . minutes； seconds span . innerhtml = t . seconds； ... } 添加前导零现在时钟不再每秒都在重建，我们还有一件事要做:添加前导零。例如，不是让时钟显示7秒，而是显示07秒。一个简单的方法是在数字的开头加上字符串“0”，然后截掉最后两位数字。

例如，要将前导零添加到“秒”值，您可以这样更改:

seconds span . innerhtml = t . seconds； 为此:

seconds span . innerhtml =(& # 39；0'+ t .秒)。切片(-2)； 如果需要，还可以在分钟和小时中添加前导零。如果你已经走了这么远，恭喜你！现在可以显示您的时钟了。

注意:您可能需要在CodePen中点击“重新运行”来开始倒计时。

下面的例子展示了如何为一些用例扩展时钟。都是基于上面看到的基本例子。

假设我们希望时钟在某些日子显示，而不是在其他日子。例如，我们可能有一系列事件，不想每次都手动更新时钟。这是提前安排事情的方法。

在CSS中将其display属性设置为hidden clock none。然后将以下内容添加到initializeClock函数中(var clock在以开头的行之后)。一旦initializeClock调用此函数，将导致时钟只显示:

clock . style . display = & # 39；block & # 39； 接下来，我们可以指定时钟显示的日期。这将替换截止日期变量:

const schedule =[ [& # 39；2015年7月25日& # 39；, '2015年9月20日& # 39；]， [& # 39；2015年9月21日& # 39；, '2016年7月25日& # 39；]， [& # 39；2016年7月25日& # 39；, '2030年7月25日& # 39；] ]； schedule数组中的每个元素代表一个开始日期和一个结束日期。如上所述，它可以包括时间和时区，但是我在这里使用简单的日期来保持代码的可读性。

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

//迭代schedule 中的每个元素，for(var I = 0；我& ltschedule.lengthi++){ var start date = schedule[I][0]； var end date = schedule[I][1]； //以毫秒为单位放置日期以便于比较 var startMs = date . parse(start date)； var endMs = date . parse(end date)； var current ms = Date . parse(new Date())； //如果当前日期在开始日期和结束日期之间，则显示时钟 if(endMs & gt；当前时间&&当前时间& gt= startMs){ initialize clock(& # 39；clockdiv & # 39，结束日期)； } } schedule . foreach(([start date，end date])= & gt；{ //以毫秒为单位放置日期以便于比较 const startMs = date . parse(start date)； const endMs = date . parse(end date)； const current ms = Date . parse(new Date())； //如果当前日期在开始日期和结束日期之间，则显示时钟 if(endMs & gt；当前时间&&当前时间& gt= startMs){ initialize clock(& # 39；clockdiv & # 39，结束日期)； } })； 现在，您可以提前安排时钟，而不必手动更新。您可以根据需要缩短代码。为了阅读，我把自己变得冗长。

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

我们需要做的就是截止日期，用这个替换变量:

const timeInMinutes = 10 const current time = Date . parse(new Date())； const deadline =新日期(current time+timeInMinutes * 60 * 1000)； 这段代码会取当前时间，再加十分钟。这些值将被转换为毫秒，因此它们可以被加在一起，成为一个新的截止日期。

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

有时，有必要保持时钟状态超过当前页面。如果我们想在整个网站上设置一个10分钟的计时器，我们不想在用户转到其他页面时重置它。

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

这是逻辑:

为此，请将变量替换为以下截止时间:

让截止日期； //如果有& # 39；如果是一个名为myClock的cookie，则使用该值作为截止日期 ，如果(document . cookie & & document . cookie . match(& # 39；我的时钟& # 39；)){ //从cookie中获取截止时间值 deadline = document.cookie.match(/(^|；)myclock=([^；]+)/)[2]; } else { //否则，设置从现在起10分钟后的截止日期 //将其保存在具有该名称的cookie中 //创建从现在起10分钟后的截止日期 const timeInMinutes = 10； const current time = Date . parse(new Date())； deadline =新日期(current time+timeInMinutes * 60 * 1000)； //将截止日期存储在cookie中以备将来参考 document . cookie = & # 39；我的时钟= & # 39；+截止时间+& # 39；；path =/；domain = . your domain . com & # 39；； } 这段代码使用了cookie和正则表达式，它们是独立的主题。所以这里就不赘述了。需要注意的一点是，你需要改变。yourdomain.com到实际领域。

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

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

在阅读了本文中的示例后，您现在知道如何只用几行原始JavaScript代码创建自己的倒计时器了！我们已经研究了如何制作一个基本的倒计时钟，并有效地显示它。我们还介绍了添加一些有用的附加功能，包括调度、绝对时间和相对时间，以及使用Cookie来保存页面和站点访问之间的状态。

& lt！DOCTYPE html & gt & lt；html lang = & # 34zh & # 34& gt & lt；head & gt & lt；meta charset = & # 34UTF-8 & # 34；/& gt； & lt；meta name = & # 34视窗& # 34；内容= & # 34；宽度=设备宽度，初始比例= 1.0 & # 34；/& gt； & lt；meta http-equiv = & # 34；X-UA兼容& # 34；内容= & # 34；ie = edge & # 34/& gt； & lt；title & gt倒计时钟& lt/title & gt； & lt；style type = & # 34text/CSS & # 34；& gt body { text-align:center； 背景:# 00ECB9 font-family:sans-serif； font-weight:100； } h1 { color:# 396； font-weight:100； font-size:40px； 边距:40px 0px 20px } # clock div { font-family:sans-serif； color:# fff； display:inline-block； font-weight:100； text-align:居中； font-size:30px； } # clock div & gt；div{ 填充:10px border-radius:3px； 背景:# 00BF96 display:inline-block； } # clock div div & gt；span{ 填充:15px border-radius:3px； 背景:# 00816A display:inline-block； } 。small text { padding-top:5px； font-size:16px； } & lt；/style & gt； & lt；/head & gt； & lt；body & gt & lt；h1 & gt倒计时钟& lt/h1 & gt； & lt；div id = & # 34clockdiv & # 34& gt & lt；div & gt & lt；span class = & # 34天& # 34；& gt& lt/span>。 & lt；div class = & # 34smalltext & # 34& gt天数& lt/div & gt； & lt；/div & gt； & lt；div & gt & lt；span class = & # 34小时& # 34；& gt& lt/span>。 & lt；div class = & # 34smalltext & # 34& gt小时& lt/div & gt； & lt；/div & gt； & lt；div & gt & lt；span class = & # 34分钟& # 34；& gt& lt/span>。 & lt；div class = & # 34smalltext & # 34& gt分钟& lt/div & gt； & lt；/div & gt； & lt；div & gt & lt；span class = & # 34秒& # 34；& gt& lt/span>。 & lt；div class = & # 34smalltext & # 34& gt秒& lt/div & gt； & lt；/div & gt； & lt；/div & gt； & lt；脚本类型= & # 34；文本/JavaScript & # 34；& gt function gettime remaining(end time){ const total = Date . parse(end time)-Date . parse(new Date())； const seconds = math . floor((total/1000)% 60)； const minutes = math . floor((total/1000/60)% 60)； const hours = Math.floor((合计/(1000 * 60 * 60))% 24)； const days = math . floor(total/(1000 * 60 * 60 * 24))； return { 总计， 天， 小时， 分钟， 秒 }； } 函数initializeClock(id，end time){ const clock = document . getelementbyid(id)； const days span = clock . query selector(& # 39；。天& # 39；); const hours span = clock . query selector(& # 39；。小时& # 39；); const minutes span = clock . query selector(& # 39；。分钟& # 39；); const seconds span = clock . query selector(& # 39；。秒& # 39；); function update clock(){ const t = gettime remaining(end time)； days span . innerhtml = t . days； hours span . innerhtml =(& # 39；0'+ t小时)。切片(-2)； minutes span . innerhtml =(& # 39；0'+ t .分钟)。切片(-2)； seconds span . innerhtml =(& # 39；0'+ t .秒)。切片(-2)； if(t . total & lt；= 0){ clearInterval(time interval)； } } update clock()； const time interval = setInterval(update clock，1000)； } const deadline = new Date(Date . parse(new Date())+15 * 24 * 60 * 60 * 1000)； initialize clock(& # 39；clockdiv & # 39，截止日期)； & lt；/script & gt； & lt；/body & gt； & lt；/html & gt；推荐JavaScript经典范例的学习资料文章“图文并茂地说明JavaScript的运行机制”

一个轻量级的JavaScript全文搜索库，可以轻松实现站内离线搜索。

推荐15个Web程序员常用的源代码编辑器

“值得收藏”的10个实用JS技巧

细粒度的269个JavaScript小函数让你少加班少熬夜(1)“值得收藏”

细粒度的269个JavaScript小函数让你少加班少熬夜(2)“值得收藏”

细粒度的269个JavaScript小函数让你少加班少熬夜(3)“值得收藏”

细粒度的269个JavaScript小函数让你少加班少熬夜(4)“值得收藏”

细粒度的269个JavaScript小函数让你少加班少熬夜(5)“值得收藏”

细粒度的269个JavaScript小函数让你少加班少熬夜(六)“值得收藏”

深入JavaScript教你如何防止内存泄漏。

手把手教你7个有趣的JavaScript项目“附源代码”

手把手教你7个有趣的JavaScript项目——在“附源代码”下

“JavaScript使用mediaDevices API访问相机自拍”

手把手教你如何在前端代码中出错并报告给“JS章节”

让你彻底了解移动前端和Web前端的区别。

63个JavaScript常规礼包“值得收藏”

提高JavaScript技能的10个问题

JavaScript图表库的5个最佳选择

彻底理解JavaScript中Object.freeze和Object.seal的用法。

Visual JS:事件循环过程动态图演示

教你如何利用动态规划和贪婪算法实现前端瀑布布局的“练习”。

Visual js:用动态图展示承诺的过程& Async/Await

可以拖动原生JS包的验证滑块吗？“实践”

如何实现高性能的在线PDF预览

用字体库加密数据的细节——模仿58同城。

Node.js完成了吗？》

Pug 3.0.0正式发布，不再支持Node.js 6/8。

"纯JS手写轮播(代码逻辑清晰，易于理解)"

20年来中国版JavaScript的创作标准

“60多个前端常用工具和方法值得收藏”JS章节

箭头函数与常规函数的五大区别

通过发布/订阅的设计模式理解Node.js的核心模块事件

“前端章”不再受规律性困扰”

“苏威”Node.js V14.3.0的发布支持顶级Await和REPL增强。

《深入精品浏览器原理流程图》

JavaScript已经进入第三时代，未来将何去何从？》

“在前端上传之前预览文件图像、文本、json、视频和音频的练习”

深入研究EventLoop与浏览器渲染、帧动画和空空闲回调的关系。

推荐13个有用的“值得收藏”的JavaScript数组技巧

前端基础知识:窗口位置详解

不要依赖普通人

犀牛作者:最被遗忘的JavaScript特性

作品《值得收藏》中常用的36个JavaScript函数片段

“节点+H5实现大文件分片上传，断点续传”

了解文件上传全过程(1.8w单词深度分析)《前端高级要领》

【实践总结】关于打破小程序束缚，实现批量上传

“手把手教你上传各种文件的前端策略和大文件断点续传”

面试官字节跳动:请实现大文件上传和断点续传。

说说关于文件上传下载的前端的东西【练习】。

教你写一个前端图像压缩，方向校正，预览，上传的插件。

最全面的JavaScript模块化方案和工具

前端高级JS中的内存管理

JavaScript常规深度和10个非常有趣的常规实践

一个经常被前端面试官忽略的JavaScript面试问题

一行JS代码实现了一个简单的模板字符串，而不是“练习”

JS代码如何压缩“前端高级”

前端开发规范:命名规范、html规范、css规范、js规范

[规范]前端团队代码规范的最佳实践

100个原生JavaScript代码片段的知识点详细总结【练习】

前端174个JavaScript知识点汇总(一)

前端174个JavaScript知识点汇总(二)

前端174个JavaScript知识点汇总(三)

一些很有意思的javascript知识点总结【练习】

都2020年了，你还不知道JavaScript decorator？》

“用JavaScript实现图像合成和下载”

70个JavaScript知识点的详细总结(一)【练习】

70个JavaScript知识点的详细总结(第二部分)[练习]

开源一个JavaScript版本的敏感词过滤库。

送你43个JavaScript面试问题

三大小众JavaScript库，你值得拥有。

手把手教你深化JavaScript知识体系【思维导图】。

推荐7大JavaScript产品步骤指南库

Echa哥教你彻底理解JavaScript执行机制。

一个合格的中级前端工程师的28个JavaScript技能

“高频项目总结中用到的知识点深度分析[JS]”

JavaScript工具函数的完整集合[新]

从JavaScript查看设计模式(摘要)

身份证号的正则表达式和验证(JavaScript，Regex)。

在浏览器中实现JavaScript定时器的四种创新方法

Three.js动态效果图

手把手教你59种常用的JS方法。

127个常用的JS代码片段，每个代码片段需要30秒理解——【我】。

用简单的术语解释js深度拷贝与轻度拷贝

手把手教你JS开发H5游戏【灭星】

用通俗易懂的语言解释一下JS中this/apply/call/bind的巧妙用法【练习】。

手把手教你解读JS中这个的真正含义【练习】。

书到用，恨少，一大波JS开发工具功能来了。

“干货满满！如何优雅简洁地实现时钟翻转器(支持JS/Vue/React)

手把手教你JS异步编程的六种方案【练习】

减少加班的15个高效JS技能知识点总结【练习】

手把手教你JS开发H5游戏【黄金矿工】

教你JS手动上下左右滚动显示器浏览器。

" JS经典例题知识点整理和总结[练习]"

“26000字JS干货分享，带你领略前端魅力[基础篇]”

“26000字JS干货分享，带你领略前端魅力【实践】”

让你的JS写得更漂亮的简单步骤

恭喜你拿到了治疗JS这个的详细处方。

说说关于文件上传下载的前端的东西【练习】。

教你在面试中绕开5个关于JavaScript作用域的漏洞。

Jquery插件(公共插件库)

如何防止重复发送ajax请求

用JavaScript+Canvas实现自定义画板

延续在JS“前部”中的应用