vue中在一个页面如何设置多个倒计时

Posted 2022-07-12 shy0113

<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>