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

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

  • 相关阅读:
    修改Oracle数据库的字符集为UTF-8
    yum源的更新问题
    Spark的编译
    hadoop版本和位数的查看方法
    hadoop2.x通过Zookeeper来实现namenode的HA方案以及ResourceManager单点故障的解决方案
    zookeeper3.4.6的安装
    SQL SERVER回滚恢复误操作的数据
    SQLServer异常捕获
    111111
    sql分割函数
  • 原文地址:https://www.cnblogs.com/onlywu/p/14168374.html
Copyright © 2020-2023  润新知