// 倒计时 countdown(){ let [h,m,s] = [2,0,0]; this.timersInfo = '距离二维码过期还剩' this.timers = '02时' + '00分' + '00秒' ; clearInterval(this.timeSet) this.timeSet = null; this.timeSet = setInterval(()=>{ if(s<=0){ s = 60; if(m<=0){ m = 60; h--; } m--; } s--; let hh = h < 10 ? '0' + h : h; let mm = m < 10 ? '0' + m : m; let ss = s < 10 ? '0' + s : s; this.timersInfo = '距离二维码过期还剩' this.timers = hh+'时'+ mm + '分'+ss + '秒' ; if(h<=0 && m<=0 && s<=0){ clearInterval(this.timeSet) this.timersInfo = ''; this.timers = '二维码已过期,请点击下方刷新二维码按钮,重新获取'; this.$refs.qrcode.innerHTML = `<div class="qrcodeOutTime">二维码已过期,请重新获取</div>`; } },1000) },
使用vue-cli框架,在请求你需要的接口前
// 例如
getDataList(){
this.timersInfo = '正在加载二维码......' this.timers = '' ;
this.axios().then().catch()
}
请求成功
this.$http({ url:'http//xxxxxxxxxx接口名', method:'get', params:params }).then(res => { if(res.data.code === 200){ this.qrcodeMethod(res.data.prePayOrderInfo) clearInterval(this.timeSet) // 重要的是这一步 this.countdown() // 和这一步 }else{ console.log(res.data.msg); } })
这是写二维码倒计时的时候随手写的一个时间倒计时,发出来共同探讨一下,如有不足之处或者可以优化的地方,请各位大佬指点迷津。