1、实现需求
在秒杀会场的商品列表,每一个商品都需要展示当前的秒杀时间倒计时,且每个商品的结束时间不一样。
2、实现思路
获取当前时间和结束时间,计算时间差,再将时间差转换为日时分秒,使用定时器每秒更新。
3、代码
<script>
export default {
props: ["item","endTime"],//父组件传递过来的值
data() {
return {
model: {
d: '00',//天
h: '00',//小时
m: '00',//分钟
s: '00',//秒
},
timedown: null
}
},
watch: { //引入的组件,所以直接监听数据的变化开启倒计时
endTime: {
handler(newvalue, oldvalue) {
if (newvalue) {
this.countDown()
}
},
immediate: true
}
},
onHide() { //离开页面前清除计时器
clearTimeout(this.timedown)
this.timedown = null
},
beforeDestroy() {//页面销毁清除计时器
clearTimeout(this.timedown)
this.timedown = null
},
methods: {
openPop(id){
this.$emit('openPop',id)
},
timeFormat(param) { //处理数据永远是两位数
return param < 10 ? '0' + param : param;
},
countDown() { //倒计时函数
let that = this
// 获取当前时间,同时得到活动结束时间数组
if (that.item.status == 2) { //判断是否已经结束 已经结束
clearTimeout(that.timedown)
return false
}
let newTime = new Date().getTime();//获取当前时间
let endTime = that.endTime;//获取结束时间的时间戳
// 如果活动未结束,对时间进行处理
if (endTime - newTime > 0) {
let time = (endTime - newTime) / 1000;
// 获取天、时、分、秒
let d1 = parseInt(time / (60 * 60 * 24));
let h1 = parseInt(time % (60 * 60 * 24) / 3600);
let m1 = parseInt(time % (60 * 60 * 24) % 3600 / 60);
let s1 = parseInt(time % (60 * 60 * 24) % 3600 % 60);
that.model = {
d: that.timeFormat(d1),
h: that.timeFormat(h1),
m: that.timeFormat(m1),
s: that.timeFormat(s1)
}
} else { //活动已结束,全部设置为'00'
that.model = {
d: '00',
h: '00',
m: '00',
s: '00'
}
clearTimeout(that.timedown) //活动结束 清除倒计时
that.timedown = null
return false;
}
// 定时器1秒后再执行一次
this.timedown = setTimeout(this.countDown.bind(this), 1000);
},
}
}
</script>