使用场景：
一般多个定时器同时使用的场景主要应用在限时活动或者限时抢购商品等，如一个页面存在多个商品，且每个商品都有独立的限时抢购时间，因此就会遇到多个定时器同步刷新倒计时
限时抢购使用场景
这次就用简单数据来模拟多个定时器同步刷新实现效果,效果不同原理一样
模拟效果
html
[crayon-60054009eb920866048414/]
js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
var timeId export default { name: '', data () { return { timeLists: [] } }, created () { // 实例被创建之后执行代码 this.getTimeList() }, beforeDestroy () { //组件的销毁 clearInterval(timeId) // 清除定时器 timeId=null }, methods: { //获取各节日时间 getTimeList () { let timeArr = [{ //模拟数据 届时即为后端请求接口获取 name: '元旦 ', time: '2020-01-01 00:00:00', residueTime: '' }, { name: '新年 ', time: '2020-01-25 00:00:00', residueTime: '' }, { name: '元宵节', time: '2020-02-08 00:00:00', residueTime: '' }] this.timeLists = timeArr this.setIntervalTime() // 调取倒计时 }, // 设置定时器做倒计时 setIntervalTime () { timeId = setInterval(() => { this.timeLists.forEach(item => { item.residueTime = this.getResidueTime(item.time) }) }, 1000) }, // 获取剩余时间 getResidueTime (end) { let nowtime = new Date().getTime(); // 当前时间 毫秒数 let endTime = Date.parse(new Date(end.replace(/-/g, "/"))); //结束时间 毫秒数 let totalSeconds = (endTime - nowtime) / 1000; // 结束时间-当前时间 = 剩余多少时间 let day = parseInt(totalSeconds / 3600 / 24); //天 let hour = parseInt((totalSeconds / 3600) % 24); //时 let minute = parseInt((totalSeconds / 60) % 60); //分 let second = parseInt(totalSeconds % 60); //秒 let residueTime ="倒计时：" + day + "天 " + hour + "时 " + minute + "分 " + second + "秒"; hour = this.addZero(hour) minute = this.addZero(minute) second = this.addZero(second) if (totalSeconds |
未经允许不得转载：一点博客-青梅煮码-共享博客 » vue实现多个倒计时同步刷新
评论抢沙发