方法一：
第一步：
首先项目中需要引入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);//清楚定时器的方法,需要定时器的指针作为参数传入clearIntervaldelete 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");第三步：
添加标签展示倒计时内容
<div><span>距离端午假期还有：</span><span id="time1"></span></div>
<br>
<div><span>距离中秋假期还有：</span><span id="time2"></span></div>
<br>
<div><span>距离国庆假期还有：</span><span id="time3"></span></div>方法二：
第一步：
同样是需要安装moment.js
第二步：
data里边定义如下:
endTime: [{time:'2020-01-01 00:00:00'},{time:'2020-01-24 00:00:00'},{time:'2020-01-25 00:00:00'},
],
timeList:[],endTime数组是定义倒计时结束的日期
timeList数组是定义转换后的最终倒计时时间
methods里边定义如下:
getDjs() {setInterval(() => {this.timeList = []; // 循环之前清空上一秒存入的数据，让数组始终保持最新一条的数据for(var i = 0; i<this.endTime.length; i++){// console.log(moment().format('X'));//获取当前时间的时间戳// console.log(moment(this.endTime[i].time).format('X'));//获取指定时间的时间戳// console.log(moment(this.endTime[i].time).format('X') - moment().format('X'));//获取时间戳的差值let timeVal = moment(this.endTime[i].time).format('X') - moment().format('X');// 时间戳转换var d = Math.floor(timeVal / (24 * 3600));var h = Math.floor((timeVal - 24 * 3600 * d) / 3600);var m = Math.floor((timeVal - 24 * 3600 * d - h * 3600) / 60);var s = Math.floor((timeVal - 24 * 3600 * d - h * 3600 - m * 60));// console.log(d + '天' + hh + '时' + mm + '分' + ss + '秒'); // 打印出转换后的时间// 当时分秒小于10的时候补0var hh = h < 10 ? '0' + h : h;var mm = m < 10 ? '0' + m : m;var ss = s < 10 ? '0' + s : s;this.timeList.push(d + '天' + hh + '时' + mm + '分' + ss + '秒'); // 将三个倒计时日期添加到一个空的数组中}console.log(this.timeList); // 打印结果},1000);
}第三步：
在created里边调用第二步的方法即可
created() {this.getDjs();
},最终效果：
