html 多个模块倒计时,Moment.js实现多个同时倒计时

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

第一步：

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

bower install moment --save # bower

npm install moment --save # npm

安装成功之后引入到项目中：

import moment from 'moment'

第二步：

在mounted中添加一个方法：

//定义一个立即执行的函数

(function () {

var Ticts=function Ticts() {

this.ticts = {};

};

Ticts.prototype.createTicts=function(id, dealline) {

var ticts=this;

var time=moment(dealline).diff(moment());

var _ticts=this.ticts[id] = {

dealine: dealline

, id: id

, time: time

, interval: setInterval(function () {

var t = null;

var d = null;

var h = null;

var m = null;

var 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操作,太多个倒计时一起会导致页面性能下降

document.getElementById(id).innerHTML = d + '天' + h + '小时' + m + '分钟' + s + '秒';

_ticts.time -= 1000;

if (_ticts.time < 0)

ticts.deleteTicts(id);//判断是否到期,到期后自动删除定时器

}, 1000)

}

};

Ticts.prototype.deleteTicts = function(id) {

clearInterval(this.ticts[id].interval);//清楚定时器的方法,需要定时器的指针作为参数传入clearInterval

delete this.ticts[id];//通过delete的方法删除对象中的属性

};

//新建一个ticts对象,放到window全局函数中,那么在html页面是(或者其他js文件)可以访问该对象

window.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");

第三步：

添加标签展示倒计时内容

距离端午假期还有：

距离中秋假期还有：

距离国庆假期还有：

最终效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。