前端验证码倒计时的实现（实战）

偏执的太偏执、 2022-12-04 08:51 203阅读 0赞

是用vue写的，但是逻辑基本上都是一样的。  
效果如下：  
![在这里插入图片描述][20200907134236520.gif_pic_center]  
验证码倒计时：

codeTimer() { 
            this.timer = 60;
            this.codeText = "获取验证码";
            let _this = this;//setTimeout里面的this不一样,所以在这里先保存好
            if (this.timer >= 1) { 
            //this.$refs.eleCode是vue获取dom元素的一种方法
              this.$refs.eleCode.setAttribute("disabled", "true");//验证码倒计时开始后，不可再点击
              this.$refs.eleCode.setAttribute("value", this.timer + "s 后获取");//点击后的文本
              this.$refs.eleCode.style.backgroundColor = "#fce0d2";//点击后颜色变淡
              this.timer--;
              setTimeout(function () { 
                _this.codeTimer();
              }, 1000);
            } else { 
              this.$refs.eleCode.setAttribute("value", this.codeText);
              this.$refs.eleCode.removeAttribute("disabled");
              this.$refs.eleCode.style.backgroundColor = "#f16622";
              this.timer = 60;
            }
          },

html截取部分：

//号码输入框
            <input
                class="login-input login-phone"
                placeholder="请输入你的手机号码"
                type="number"
                v-model="loginNumberVal"
                @input="lenControl"
              />
              
           //验证码输入框
           <input
                class="login-input login-code"
                placeholder="请输入短信验证码"
                type="number"
                v-model="loginCodeVal"
                @input="lenControl"
              />
    
          //获取验证码按钮
         <input
                class="getCode"
                type="button"
                @click.stop="toGetCode"
                ref="eleCode"
                :value="codeText"
              />

这块实现的完整的代码：  
https://blog.csdn.net/Sunday97/article/details/108444634

[20200907134236520.gif_pic_center]: /images/20221123/49ae5d31e5564e63ba3eab5e59f45a0d.png