Moment.js实现多个同时倒计时

本文的例子分享了Moment.js实现多个同时倒计时的具体代码，供大家参考。具体内容如下

第一步：

首先，需要在项目中引入moment.js。安装方法如下：

鲍尔安装时刻-保存#鲍尔NPM安装时刻-保存# NPM成功安装后被引入项目：

从“时刻”步骤2导入时刻：

将方法添加到已挂载的：

//定义要立即执行的函数(function(){ var TIC ts=function TIC ts(){ this。TIC ts={ }；};ticts . prototype . createticts=function(id，deal line){ var ticts=this；变化时间=时刻(交易线)。diff(moment())；var _ ticts=this . ticts[id]={ dealine : dealine，id: id，time: time，interval : setInterval(function(){ var t=null；var d=nullvar h=nullvar m=nullvar s=null//js默认时间戳为毫秒，需要转换为秒t=_ ticts . time/1000；d=math . floor(t/(24 * 3600))；h=math . floor((t-24 * 3600 * d)/3600)；m=math . floor((t-24 * 3600 * d-h * 3600)/60)；s=math . floor((t-24 * 3600 * d-h * 3600-m * 60))；//在这里，你可以做一个格式化的过程，甚至做一个毫秒级的页面渲染。基于DOM操作，过多的倒计时会导致页面性能下降。文件。getelementbyid (id)。inner html=d ' days ' h ' hours ' m ' min ' s ' seconds '；_ ticts . time-=1000；if(_ ticts . time 0)ticts . deleteticts(id)；//判断是否过期，过期后自动删除定时器}，1000)}；ticts . prototype . deleteticts=function(id){ clearInterval(this . ticts[id])。间隔)；//清除timer的方法，将timer的指针作为参数传递给clearinterval删除这个。ticts[id]；//通过删除删除对象中的属性}；//新建一个ticts对象，放在window全局函数中，然后就可以在html页面(或者其他js文件)上访问该对象了。窗户。Ticts=new Ticts()；})();Ticts.createTicts('time1 '，' 2019-06-07 00:00:00 ')；Ticts.createTicts('time2 '，' 2019-09-13 00:00:00 ')；Ticts.createTicts('time3 '，' 2019-10-01 00:00:00 ')；第三步：

添加标签以显示倒计时内容

从端午节假期开始/span span ID=' time 1 '/span/span从中秋节假期开始/span span ID=' time 2 '/span/span/span从国庆节假期开始/spanspan id='time3'/span/div最终效果：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。