Vue 方法
<p><span id="timer">{{msg}}</span></p>
data(){
creatime:'', // 开始时间
daoTim:'', // 倒计时时间
msg:'',
}
// 请求后台接口 获取他的下单时间‘2019-10-18 11:15:00 以及多长时间过期 ‘15/分钟 或者 30分钟’ ’
getadver(){
adver({
adverid:this.orderid.adverid
}).then(res=>{
this.daoTim = res.data.data.ad_pay_time // 过期时间 15分钟 或者30分钟
this.creatime= res.data.data.created_at // 下单开始的时间
setInterval(this.countdown, 1000); // 调用倒计时
})
},
countdown(){
var _that = this
var now=new Date(_that.creatime.replace(/-/g,'/')); //处理开始时间 这个方法兼容大多数浏览器以及h5手机端
var minutes=Number(_that.daoTim); //处理输入的过期时间
var end=now.setMinutes (now.getMinutes () + minutes); //计算最后时间
var time_now = new Date().getTime(); //当前时间
var msec =end - time_now; //最后时间-当前时间
if(msec>0){
let day = parseInt(msec / 1000 / 60 / 60 / 24)
let hr = parseInt(msec / 1000 / 60 / 60 % 24)
let min = parseInt(msec / 1000 / 60 % 60)
let sec = parseInt(msec / 1000 % 60)
day = day
hr = hr > 9 ? hr : '0' + hr
min = min > 9 ? min : '0' + min
sec = sec > 9 ? sec : '0' + sec,
this.msg = min + "分" + sec + "秒";
}else{
clearInterval(tim);
if(_that.min == '0' && _that.sec == '0')
{
window.webkit.messageHandlers.backToOc.postMessage({});
// this.$router.push('/Assets')
}
}
const that = this
var tim=setTimeout(function () {
that.countdown(_that.creatime,_that.daoTim)
}, 1000)
},
// 离开页面销毁定时器
beforeDestroy() {
clearInterval(this.tim);
this.tim = null;
},
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b3ca0c00f3ed8ba185710a19ff8d8f86.png)