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

作者:半夏

时间:2026-10-21

浏览:431

本文提供了一段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>

以上就是本文的全部内容,希望能为读者提供有益的帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章