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>

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

作者最新文章