JavaScript实现短信验证码倒计时功能
作者:半夏时间:2026-10-21 19:25:07浏览:432
本文提供了一段JavaScript代码,用于实现点击按钮后短信验证码的周期性倒计时功能。通过setInterval定时器控制按钮状态与文字显示,倒计时结束后重置按钮,方便用户重新获取验证码。
JavaScript实现短信验证码倒计时功能
这里展示了一段关于JavaScript实现周期性短信验证码获取的代码示例,供读者参考。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<input type="button" id="btn" value="点击发送验证码"/>
<script>
var timerId = null;
var btn = document.getElementById("btn");
var num = 5;
btn.onclick = function () {
btn.disabled = true;
timerId = setInterval(function () {
num--;
btn.value = num + "秒后可以发送";
if (num === 0) {
clearInterval(timerId);
btn.value = "点击发送验证码";
btn.disabled = false;
num = 5;
}
}, 1000);
};
</script>
</body>
</html>
以上就是本文的全部内容,希望能为读者提供有益的帮助。
作者最新文章
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
