60s倒计时

60S倒计时

JS实现

1. html

<button class="getCode" onclick="sendCode(this)">获取验证码</button>

2. js

var count=60; 
function sendCode(val) { 
    if (count == 0) { 
        val.removeAttribute("disabled");    
        val.value="获取验证码"; 
        count = 60; 
    } else { 
        val.setAttribute("disabled", true); 
        val.value="重新发送(" + count + ")"; 
        count--; 
    } 
    
    setTimeout(function() { 
        sendCode(val);
    },1000) 
}

3. css

.getCode{
      border-radius: 4px;
      background: #eee;
      color: #000;
      width: 120px;
      height: 34px;
      line-height: 30px;
      border: 1px solid #ccc;
}

vue实现

1. html

<button class="getCode" v-bind:class="{disable:count>0}"  @click="sendCode">
    {{text()}}
</button>

2. js

   data(){
      return {
        count: false
      }
    },
    methods: {
      sendCode:function(){
        if (this.count > 0) {
          return false;
        }
        this.count = 59;
        var that = this;
        var timerInterval = setInterval(function(){
          if(that.count > 0){
            that.count -- ;
          }else{
            clearInterval(timerInterval);
          }
        },1000);
      },
      text(){
        if(this.count > 0){
          return this.count+'s后获取';
        }
        if(this.count === 0){
          return '重新获取';
        }
        if(this.count === false){
          return '获取验证码';
        }
      }
    }

3. css

 .getCode{
     border-radius: 4px;
     background: #eee;
     color: #000;
     width: 120px;
     height: 34px;
     line-height: 30px;
     border: 1px solid #ccc;
   }
 .disable{background:#eee;}