vue中在一个页面如何设置多个倒计时
<script>
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秒";
}
}
export default {
name: "meizhoupintuan",
async created() {
let data = await home_meizhou_api();
this.list = data.data.list;
this.timer();
},
data() {
return {
list: [],
temp: null //倒计时初始
};
},
methods: {
timer() {
//页面多个定时器 //主要逻辑都在这页面更新
let _that = this;
this.temp = setInterval(() => {
this.list.forEach((item, index) => {
item.dayTime = countDownFun(item.endAt);
this.$set(this.list, item.dayTime, countDownFun(item.endAt));
console.log(this.temp, "6");
});
}, 1000);
},
},
destroyed() {
//切记页面销毁需要销毁
clearInterval(this.temp);
console.log(this.temp, "销毁");
}
};
</script>