前端实现手机短信验证码倒计时效果

2023-12-13 03:43:53

实现效果:实现按钮倒计时10s后可重新发送验证码

一、思路
1、禁用按钮,调用后端接口,获取验证码
2、setTimeOut(() => {},1000)延迟1s执行,time - 1,返回文案,9s
3、迭代处理,调用自身函数,time - 1,返回文案,8s,实现9s 8s 7s 这样倒计时的效果。
4、不能无限迭代减1,判断时间为最后一秒时,解除按钮禁用状态

二、代码

    sendVerifyCode() {
      this.verifyCodeDisable = true;
      // 调用后端接口获取验证码
      this.getVerifyCode()
      // 初始化倒计时时间
      let time = 10;
      this.setTime(time)
    },
    setTime(time) {
      setTimeout(() => {
        if (time > 1) {
          time--;
          // 返回文案
          this.tips = time + 's';
          // 迭代调用
          this.setTime(time)
        } else {
          // 倒计时最后一秒,解除禁用状态,可重新发送验证码
          this.verifyCodeDisable = false;
          this.tips = '获取验证码';
        }
      }, 1000)
    }

文章来源:https://blog.csdn.net/weixin_46042206/article/details/134833472
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。