网站中为了防止恶意获取验证短信、验证邮箱，都会在点击获取验证码的按钮上做个倒计时的效果。比如：做注册页面时会有获取验证码按钮，点击后过60秒才能重新获取，数字是递减的到0时重新回到最初的状态。实现这个功能只需要一个setInterval和一个clearInterval就能搞定了，不需要太多的代码。

1.jquery的实现：

/**
 * 倒计时
 * e 代表发送按钮对象
 */
function resetTime(e){
    var second = 60;
    var timer = null;
    timer = setInterval(function(){
        second -= 1;
        if(second >0){
            $(e).attr('disabled',true);
            $(e).text(second + "秒后获取验证码");
        }else{
            clearInterval(timer);
            $(e).attr('disabled',false);
            $(e).text("发送短信验证码");
        }
    },1000);
}

2、在vue实现倒计时获取验证码效果：

这里我们没有使用setInterval，而使用setTimeout，每1秒钟递归来实现的。注意区别：

<template>
 <div>
  <el-button :disabled="disabled" @click="sendcode" class="sendcode">{{btntxt}}</el-button>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    disabled: false,
    time: 5,
    btntxt: "发送验证码",
   };
  },
  methods: {
   sendcode() {
    this.time = 5;
    this.timer();
   },
   //发送手机验证码倒计时
   timer() {
    if (this.time > 0) {
     this.disabled = true;
     this.time--;
     this.btntxt = this.time + "秒";
     setTimeout(this.timer, 1000);
    } else {
     this.time = 0;
     this.btntxt = "发送验证码";
     this.disabled = false;
    }
   },
  }
 }
</script>

<style scoped>
 .el-button {
  margin: 100px 50px;
 }
</style>

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/10294