多个倒计时并行(拼团倒计时)

本文是对类似于拼团，多个商品每个都有各自的倒计时，一开始接到接到这个需求也是头疼了一阵子，如果是在商品列表少的时候完全就可以写成死的，固定的变量，写几个定时器就ok了，

但是这次数据是活的，看一些拼团app都可以实现，既然能实现就搞起来，有了以下的想法使用环境 vue

写一个准备渲染的数据,

data () {return {list: [ // 准备渲染的数据{remainTime: 900000, // 距离结束还有多久remainTimeStr: '' // 展示文案},{remainTime: 400000,remainTimeStr: ''},{remainTime: 60500,remainTimeStr: ''},]}
}

百度copy一个倒计时的方法

countdowm (timestamp) {let self = thislet timer = setInterval(function () {let nowTime = new Date()let endTime = new Date(timestamp)let t = endTime.getTime() - nowTime.getTime()if (t > 0) {let day = Math.floor(t / 86400000)let hour = Math.floor((t / 3600000) % 24)let min = Math.floor((t / 60000) % 60)let sec = Math.floor((t / 1000) % 60)hour = hour < 10 ? '0' + hour : hourmin = min < 10 ? '0' + min : minsec = sec < 10 ? '0' + sec : seclet format = ''if (day > 0) {format = `${day}天${hour}小时${min}分${sec}秒`}if (day <= 0 && hour > 0) {format = `${hour}小时${min}分${sec}秒`}if (day <= 0 && hour <= 0) {format = `${min}分${sec}秒`}self.content = format} else {clearInterval(timer)self.content = 'over'}}, 1000)
}

首先

根据逻辑对倒计时的方法进行更改,我们直接使用的就是距离结束还有多少时间的时间戳，我的思路是用一个定时器达到一个并行多个倒计时的思路，所以先将方法进行优化

1. 不需要获取时间

2. 也不需要一些时间计算

3. 因为是多个倒计时并行所以清楚定时器的逻辑需要进行更改

如下

countdowm (timestamp) {let self = thislet timer = setInterval(function () {let t = timestampif (t > 0) {let day = Math.floor(t / 86400000)let hour = Math.floor((t / 3600000) % 24)let min = Math.floor((t / 60000) % 60)let sec = Math.floor((t / 1000) % 60)day = day < 10 ? '0' + day : dayhour = hour < 10 ? '0' + hour : hourmin = min < 10 ? '0' + min : minsec = sec < 10 ? '0' + sec : seclet format = ''format = `${day}天${hour}小时${min}分${sec}秒`self.content = format} else {// clearInterval(timer)self.content = 'over'}}, 1000)
}

简化完毕，把自己刚才的思路带进方法内

在定时器里写一个循环每次减少一秒让当前数据内remainTime时间戳-1000

countdown () {let self = thislet timer = setInterval(function () {for (let i = 0; i < self.list.length; i++) {self.list[i].remainTime -= 1000let t = self.list[i].remainTimeif (t > 0) {let day = Math.floor(t / 86400000)let hour = Math.floor((t / 3600000) % 24)let min = Math.floor((t / 60000) % 60)let sec = Math.floor((t / 1000) % 60)day = day < 10 ? '0' + day : dayhour = hour < 10 ? '0' + hour : hourmin = min < 10 ? '0' + min : minsec = sec < 10 ? '0' + sec : seclet format = ''format = `距离结束：<b>${day}</b> 天 <b>${hour}</b> 时 <b>${min}</b> 分 <b>${sec}</b> 秒`self.list[i].remainTimeStr = format} else {// 进行判断 如果数据内所有的倒计时已经结束，那么结束定时器， 如果没有那么继续执行定时器let flag = self.list.every((val, ind) => val.remainTime <= 0)if (flag) clearInterval(timer)self.list[i].remainTimeStr = `距离结束：<b>00</b> 天 <b>00</b> 时 <b>00</b> 分 <b>00</b> 秒` // 结束文案}}}, 1000)
}

这样并行多个定时器就做好了, 但是发现了一个问题当你切换路由的时候发下你的定时器如果未结束他还在执行，这样对性能造成了一些影响，虽说用户看不到，但是也要解决，提高用户浏览体验

在你切换页面的时候使用vue中的生命周期函数把数据更改为0 就ok

destroyed () {this.list.forEach((val) => {val.remainTime = 0})
}

嗖嗖嗖~ 对应文章

还有一些什么好的方法可以联系我喔~

多个倒计时并行(拼团倒计时)相关推荐

拼团倒计时效果 2021-01-13
[欢迎关注wx公众号:一缕风沙渡,回复uniapp拼团倒计时获取最新文件] image.png image.png 拼团倒计时效果.gif <template><view class ...
微信小程序实现拼团成功动画
微信小程序实现如上效果. 分为两个组件: PinTuan: 整体组件 PinTuanHead: 每个头像组件代码如下: PinTuan.js Component({attached:function ...
基于jQuery倒计时插件实现团购秒杀效果
倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的 ...
微信小程序拼团功能之表结构
做拼团功能首先我对需求看了一下,对于单个的拼团商品要求有拼团的人数限制,拼团的活动时间倒计时,以及开团后参团时间倒计时等需求.开团人是团长与参团人加以区分,同时一个拼团有多人参加,付款与未付款对拼团成 ...
怎么实现微信小程序云开发拼团功能？
[微信云开发教程]怎么实现微信小程序云开发拼团功能? 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 [微 ...
拼团活动的业务测试点
根据图片的原型梳理的拼团活动的测试点如下: 一.页面与原型一致性的检查 1.商品图片可点击查看,可放大,可滑动查看, 2.拼单价显示是否正确 3.限量份数显示是否正确,限购数件数的显示是否正确 4.已 ...
微信小程序案例：拼团模块
就像拼夕夕一样,有些活动需要朋友助力. 最近有个需求是这样的: 核心: 与微信小程序的激励广告联系一起,点击按钮助力,弹出微信激励广告,观看广告后,给予奖励,助力人数减1 分享给朋友,请朋友助力,助力 ...
html倒计时星期日,Web前端——倒计时效果
一.JavaScript Date对象 getYear() 获取年份,获取年最好用 getFullYear()获取完整格式年份,如2014,一般用这个 getMonth()获取月,从0开始(0~11) ...
消息延迟队列处理拼团时间到期
1.RabbitMqConfig /*** * 延时队列交换机* * 注意这里的交换机类型:CustomExchange* ** * @return* */ @Bean public CustomEx ...

多个倒计时并行(拼团倒计时)

首先

多个倒计时并行(拼团倒计时)相关推荐

最新文章

热门文章