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);
          }
        })

这是写二维码倒计时的时候随手写的一个时间倒计时,发出来共同探讨一下,如有不足之处或者可以优化的地方,请各位大佬指点迷津。

原文地址:https://www.cnblogs.com/onlywu/p/14168374.html