vue一个页面多个倒计时使用

在活动中或多或少的用到倒计时，一个很好实现，最近要用到一个页面多个倒计时。

效果图下：

直接代码；首先封装方法

export function countDownFun(time) {
time–;//时间一秒秒的减
let nowTime = new Date().getTime(); //现在时间
if(nowTime<=time){
//获取时间差
let timediff=Math.round((time-nowTime)/1000);
//获取还剩多少天
let day=parseInt(timediff/3600/24);
//获取还剩多少小时
let hour=parseInt(timediff/3600%24);
//获取还剩多少分钟
let minute=parseInt(timediff/60%60);
//获取还剩多少秒
let second=timediff%60;
return day +‘天’+hour+‘小时’+minute+‘分’+second+‘秒’
}else{
return “00天00小时00分00秒”;
}
}

订单页面

import {countDownFun} from ‘…/…/…/assets/js/common’
data () {
return {
temp :null,//倒计时初始
}
}
created(){
console.log(new Date().getTime()+10000000)
this.timer();
},
methods:{
timer(){ //页面多个定时器 //主要逻辑都在这页面更新
let _that = this;
this.temp = setInterval(()=>{
_that.orderList.forEach((item,index)=>{
item.dayTime = countDownFun(item.countDown);
_that.$set(_that.orderList,item.dayTime, countDownFun(item.countDown))
console.log(this.temp,‘6’)
})
},1000)
},
},
destroyed(){ //切记页面销毁需要销毁
clearInterval(this.temp);
console.log(this.temp,‘销毁’)
}

完成