JavaScript实现短信验证码发送倒计时功能

作者:拾光时间:2026-10-24 07:49:27浏览:434

本文介绍如何使用JavaScript实现短信验证码发送后的倒计时功能。通过获取按钮元素并绑定点击事件,利用setInterval定时器控制倒计时逻辑。在倒计时期间禁用按钮防止重复点击,时间结束后恢复按钮状态并重置倒计时变量,从而有效防止恶意获取验证码。

短信验证码倒计时功能实现

在许多App和网站中,用户进行登录或注册操作时,通常需要提供短信验证码。为了避免恶意批量获取验证码,系统通常会设置一个可点击的时间间隔。当这个时间间隔结束后,用户才可以再次点击发送按钮。接下来将通过代码演示如何实现这一功能。

具体实现代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
手机号码:<input type="text"><button>发送验证码</button>
<script>
  var btn=document.querySelector('button')
  var time=3
  btn.addEventListener('click',function () {
    btn.disabled=true
    var timer=setInterval(function () {
      if (time<0){
        clearInterval(timer)
        btn.disabled=false
        btn.innerHTML='发送验证码'
        time=3
      }else {
        btn.innerHTML = '还剩' + time + '秒'
        time -= 1
      }
    },1000)
  })
</script>
</body>
</html>

运行效果如下所示:

短信验证码倒计时功能实现

短信验证码倒计时功能实现

短信验证码倒计时功能实现

代码解析: 由于主要目的是改变按钮的样式和交互功能,因此代码仅获取了目标按钮元素。这里设置了一个名为time的变量,用于存储倒计时的初始时间。接着为按钮绑定点击事件监听器,当用户点击按钮时,将按钮的disabled属性设置为true,使其处于不可点击状态。 随后设置一个定时器。在定时器回调函数中判断time是否小于0。如果小于0,说明倒计时结束,此时清除定时器,将按钮的disabled属性恢复为false(即可点击),将按钮内的文本重置为“发送验证码”,并将time变量重新赋值为3。如果time大于等于0,则将按钮内的文本更新为“还剩”加上当前time值再加上“秒”,然后执行time自减1操作。每次定时器触发时都会进行上述判断和更新。

至此,关于使用JavaScript实现短信验证码发送间隔倒计时的介绍已完成。如需了解更多相关JS发送短信验证码的内容,建议搜索本站过往文章或继续浏览后续相关文章。感谢大家的支持!

作者最新文章