短信验证码倒计时【vue】[html+js]

方式一：短信验证码倒计时 vue

// html
<el-form-item v-show="codeCheck">
  <el-input v-model="formLoginData.message" maxlength="6" type="text" class="msgInput" placeholder="请输入验证码" @keyup.enter.native="verificationCode" />
  <el-button type="primary" class="msgBtn" @click="sendSms">{{ sendContent }}</el-button>
</el-form-item>

//data
data() {
  return {
    sendContent: '获取验证码',
    smsWait: 0,
    sendClass: false,
  }
},

// 方法
methods: {
 // 发送验证码
sendSms() {
  var that = this
  if (that.smsWait !== 0) {
    return false
  }
  console.log(that.formLoginData.phone)
  if (isEmpty(that.formLoginData.phone)) {
    this.$message({
      message: '请输入手机号',
      type: 'error'
    })
    return false
  }
  if (!isMobile(that.formLoginData.phone)) {
    this.$message({
      message: '手机号格式不正确',
      type: 'error'
    })
    return false
  }
  that.smsWait = 60
  that.waitSms()
  that.smsInterval = setInterval(function() {
    that.waitSms()
  }, 1000)
},
// 验证码倒计时
waitSms() {
  var that = this
  that.smsWait--
  var msgBtn = document.querySelector('.msgBtn')
  if (that.smsWait === 0) {
    clearInterval(that.smsInterval)
    that.sendContent = '重新获取'
    that.sendClass = false
    msgBtn.style.backgroundColor = '#1873f9'
    msgBtn.style.borderColor = '#1873f9'
    msgBtn.style.cursor = 'pointer'
  } else {
    that.sendClass = true
    that.sendContent = that.smsWait + '秒后重新获取'
    msgBtn.style.backgroundColor = '#aecdfa'
    msgBtn.style.borderColor = '#aecdfa'
    msgBtn.style.cursor = 'default'
  }
},
// 手机号验证
verificationCode() {
  if (isEmpty(this.formLoginData.phone)) {
    this.$message({
      message: '请输入手机号',
      type: 'error'
    })
    return false
  }
}
}

 

方式二：短信验证码倒计时  [纯html+js]

/* 短信验证码倒计时*/
var send=document.getElementById('sendMsg'),
    times=60,
    timer=null;
send.onclick=function(){
    // 计时开始
    var that = this;
    this.disabled=true;
    timer = setInterval(function(){
        times --;
        that.value = times + "秒后重试";
        if(times <= 0){
            that.disabled =false;
            that.value = "发送验证码";
            clearInterval(timer);
            times = 60;
        }
    },1000);
}

// html
<input type="button" class="divInput msgBtn" id="sendMsg" value="发送短信验证码"/>