JavaScript实现短信验证码倒计时与防重复提交

沿途有光

发布时间：2026-10-13| 4人浏览过

原创

通过JavaScript控制DOM元素的定时器，实现发送验证码后的秒数递减与按钮状态重置，包含完整的HTML结构与关键属性设置说明。

实现原理与目标

在移动应用或网站注册环节，为了防止恶意频繁请求短信接口，通常需要在用户点击“发送验证码”后，对按钮进行临时禁用并显示倒计时。该功能的实现依赖于前端的时间戳计算与DOM状态管理，确保用户在倒计时结束前无法再次触发发送动作。

代码实现步骤

第1步：初始化变量与获取元素

首先需要在页面加载完成后获取发送按钮的DOM对象，并定义倒计时的总时长（通常为60秒）以及定时器的引用变量。这样可以在后续的逻辑中复用这些值。

window.onload=function(){
  var send=document.getElementById('send'); // 获取发送按钮元素
  var times=60;                            // 设定倒计时总秒数
  var timer=null;                          // 定时器初始为null
  
  send.onclick=function(){
    // 进入点击处理逻辑
  };
}

第2步：绑定点击事件与启动定时器

在按钮的点击事件中，首要任务是立即禁用按钮以防止重复点击。随后使用 setInterval 创建定时器，每隔1000毫秒执行一次回调函数，将剩余秒数减1并更新按钮的文本内容。

  send.onclick=function(){
    var that = this; // 保存this引用，因为setTimeout/setInterval会改变this指向
    this.disabled=true; // 立即禁用按钮
    
    timer = setInterval(function(){
      times --;
      that.value = times + "秒后重试"; // 更新按钮显示文本
      
      // 判断是否倒计时结束
      if(times <= 0){
        clearInterval(timer); // 清除定时器
        times = 60;           // 重置秒数
        that.disabled =false; // 恢复可用状态
        that.value = "发送验证码"; // 恢复按钮原始文本
      }
    }, 1000);
  };

第3步：HTML结构搭建

配合上述JS逻辑，只需一个简单的按钮元素即可生效。以下为完整的 HTML 示例结构：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>验证码倒计时</title>
  <script type="text/javascript" src="./index.js"></script>
</head>
<body>
  <input type="button" id="send" value="发送验证码">
</body>
</html>

注意事项与最佳实践

禁用状态的准确赋值

在操作 DOM 元素的禁用属性时，开发者容易犯下常见的字符串赋值错误。必须直接赋值布尔值 true 或 false，而不能用引号包裹（如 'true'），否则会导致逻辑判断永远为真，按钮无法正常恢复。

正确写法：element.disabled = true;
备选写法：也可以使用 HTML 属性方法进行控制：element.setAttribute('disabled', 'disabled') 移除时使用 element.removeAttribute('disabled')。