Vue.JS如何实现倒计时功能
1.首先一般来说前端小伙伴们会收到后端同学传过来的一个结束时间,大部分需要倒计时得情况都是在详情页,比如商品,活动等一些场景。
2.如果需要实现倒计时功能,首先我们需要知道如何计算剩余时间,首先我们会拿到后端传过来的endTime。一般使用时间戳去计算。时间戳分为10位,秒为单位,13位毫秒为单位。首先获取当前时间用当前时间-endTime。我们就拿到了剩余时间,有两种情况:(1)首先endTime减去当前时间如果小于0说明结束时间已经过去了,返回一个“已截至”(2)如果endTime大于0就可以进行倒计时操作了。
废话不多说了,上代码
data: function() {
return {
endTime:1615601742731,//毫秒时间戳
day:'0',//天
hour:'00',//时
min:'00',//分
second:'00'//秒
}
},
methods:{
getdetails(){
//获取详情
vm.countTime()
}
// 倒计时
countTime() {
// 获取当前时间
let date = new Date()
let now = date.getTime()
// 设置截止时间
let endDate = new Date(this.endTime*1000) // this.endTime需要倒计时的日期
let end = endDate.getTime()
// 时间差
let countdown_time= end - now
// 定义变量 d,h,m,s保存倒计时的时间
if (countdown_time>= 0) {
// 天
this.day = Math.floor(countdown_time/ 1000 / 60 / 60 / 24)
// 时
let h = Math.floor(countdown_time/ 1000 / 60 / 60 % 24)
this.hour = h < 10 ? '0' + h : h
// 分
let m = Math.floor(countdown_time / 1000 / 60 % 60)
this.min = m < 10 ? '0' + m : m
// 秒
let s = Math.floor(countdown_time/ 1000 % 60)
this.second = s < 10 ? '0' + s : s
} else {
this.day = 0
this.hour = '00'
this.min = '00'
this.second = '00'
}
// 等于0的时候不调用
if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
return
} else {
this.$forceUpdate()//更新DOM
// 递归每秒调用countTime方法,显示动态时间效果,
setTimeout(this.countTime, 1000)
}
},
}
代码都是实测可用得。如果帮到你了希望点个赞~ 谢谢,主页中还有很多关于Vue等方法,都是自己用过实测得