zoukankan      html  css  js  c++  java
  • vue 验证码倒计时

    //html
     <div class="input-div" v-show="formData.phone">
         <input type="text" class="input code" name="code" v-model.trim="formData.code" placeholder="验证码">
         <button @click="getCode(formData)" class="code-btn" :disabled="!show">
             <span v-show="show">获取验证码</span>
             <span v-show="!show" class="count">{{count}} s</span>
         </button>
    </div>
    

      

     

    //js
    const TIME_COUNT = 60;
     data(){
          return {
            formData: {
              phone:'',
              code:'',
            },
            show: true,
            count: '',
            timer: null,
          }
        },
    
        methods:{
            getCode(formData){
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                      if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                      } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                      }
                    }, 1000)
                  }
            }   
        }
    

      https://blog.csdn.net/Zhooson/article/details/75228666

  • 相关阅读:
    机械奥妙
    双向可控硅
    开关电源
    阻容降压电路
    手机充电电源的电路原理
    运算放大电路
    剃须刀电路
    d039: 点的位置
    d029: 求出2-100之间的所有质数(素数)
    d023: 各位数字之和
  • 原文地址:https://www.cnblogs.com/qianjin888/p/9224829.html
Copyright © 2011-2022 走看看