完整代码:更正一下,这样每次调用函数很消耗性能,我亲眼看到页面在IOS中挂掉,这是一个不太好的示范,下面有更好的实现
curt(){ //显示倒计时
const _this = this; //保存this的值,下面会有需要
const end = new Date(_this.end).getTime(); //end是请求回来的结束时间,也可以自己设置
const now = Date.now(); //获取当前时间戳
if(now >= end){
this.d = 0;
this.h = 0;
this.m = 0;
this.s = 0;
this.timer = null; //记得当前时间大于结束时间时,清除定时器
return;
}
const msec = end - now
let d = parseInt(msec / 1000 / 60 / 60 / 24) //天
let h = parseInt(msec / 1000 / 60 / 60 % 24)//时
let m = parseInt(msec / 1000 / 60 % 60)//分
let s = parseInt(msec / 1000 % 60) //秒
//给数据赋值
this.d = d
this.h = h > 9 ? h : '0' + h
this.m = m > 9 ? m : '0' + m
this.s = s > 9 ? s : '0' + s
this.timer = setInterval(function () { //每隔一秒递归调用自己
_this.curt()}
,1000)
},
data中的数据:
data () {
return {
end:'',
d:'',
h:'',
m:'',
s:'',
timer:null
}
}
computed中,将数据整合起来
lastTime(){
return this.d + '天' + this.h + '小时' + this.m + '分钟' + this.s + '秒'
}
在watch中,当end被赋值后调用curt函数就好啦
watch:{
end(newV){
if(newV){
this.curt();
}
}
},
更好的方法
curt() { //显示倒计时
let end
if (isAndroid) { //安卓中
end = new Date(this.end).getTime();
} else if (isiOS) { //IOS中
end = new Date((this.end).replace(/-/g, '/')).getTime();
}
let now = new Date().getTime();
if (now >= end) {
this.d = 0;
this.h = 0;
this.m = 0;
this.s = 0;
this.timer = null;
return;
} else {
let msec = parseInt((end - now) / 1000)
this.timer = setInterval(() => {
msec -= 1;
let d = parseInt(msec / 60 / 60 / 24)
let h = parseInt(msec / 60 / 60 % 24)
let m = parseInt(msec / 60 % 60)
let s = parseInt(msec % 60)
//给数据赋值
this.d = d
this.h = h > 9 ? h : '0' + h
this.m = m > 9 ? m : '0' + m
this.s = s > 9 ? s : '0' + s
}, 1000)
}
},
watch: { //同样的,当end被赋值时调用curt函数,
endTime(newV) {
if (newV) {
this.end = newV;
if (new Date(newV.replace(/-/g, '/')).getTime() - Date.now() > 0) {
this.curt();
this.isOver = false
} else {
this.isOver = true
}
}
}
},
此外,还发现一个问题,IOS和安卓中转时间戳的格式不同,一般后端返回给我们的时间格式是: xxxx-xx-xx xx:xx:xx
我们使用new Date(xxxx-xx-xx xx:xx:xx).getTime()在安卓中是没有问题的,可以转为时间戳
但是在IOS中只有xxxx/xx/xx xx:xx:xx的格式才能转为时间戳,否则会显示NaN
因此在IOS中需要将时间进行处理,使用一个正则,将-替换为 / 就好了
在IOS中:
假设得到的时间赋值给time变量
new Date(time.replace(/-/g , '/')).getTime()
在IOS中就能达到我们需要的时间戳了