JavaScript实现短信验证码发送倒计时功能
本文介绍如何使用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发送短信验证码的内容,建议搜索本站过往文章或继续浏览后续相关文章。感谢大家的支持!
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
