1. 程式人生 > 實用技巧 >js兩小時倒計時,剩餘時間倒計時,倒計時

js兩小時倒計時,剩餘時間倒計時,倒計時

// 倒計時
      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);
          }
        })

這是寫二維碼倒計時的時候隨手寫的一個時間倒計時,發出來共同探討一下,如有不足之處或者可以優化的地方,請各位大佬指點迷津。