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

原创已于 2023-12-06 16:04:20 修改

· 1.4k 阅读

10 ·

版权

文章标签：

#前端 #javascript #开发语言

于 2023-12-06 15:44:04 首次发布

Javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在JavaScript中实现一个按钮点击后倒计时10秒，然后重新发送验证码的功能，通过禁用按钮、调用后端接口、使用setTimeout和递归调用来达到倒计时效果，最后在倒计时结束解除按钮禁用状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：实现按钮倒计时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)
    }