JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)-前端开发

下面是详细讲解“JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)”的完整攻略。

下面是详细讲解“JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)”的完整攻略。

一、需求分析

我们要实现的功能是：在用户点击发送短信验证码按钮后，按钮变为不可点击状态，同时开始显示倒计时，直到倒计时结束后按钮恢复可点击状态。

为了防止用户在倒计时过程中刷新页面导致倒计时失效，我们需要使用浏览器的本地存储(localStorage/sessionStorage)来保存倒计时开始时间，页面刷新后可以根据存储的时间计算出倒计时的剩余时间，从而保证倒计时能够正确恢复。

二、实现步骤

1. HTML部分

<button id="send-code-btn">发送验证码</button>

2. JavaScript部分

1）定义倒计时功能函数

function countdown(seconds) {
  var timer = setInterval(function() {
    var btn = document.getElementById('send-code-btn');
    seconds--;
    if (seconds === 0) {
      clearInterval(timer);
      btn.innerHTML = '发送验证码';
      btn.disabled = false;
      localStorage.removeItem('startTime');
    } else {
      btn.innerHTML = '重新发送(' + seconds + ')';
    }
  }, 1000);
}

这个函数负责处理倒计时功能，传入参数seconds表示倒计时的总秒数。在函数内，使用setInterval函数每隔一秒钟更新一次倒计时的状态，直到倒计时结束。结束后清除计时器，同时将按钮文字设置为‘发送验证码’，按钮状态设置为可点击，从localStorage中删除存储的开始时间。

2）绑定按钮点击事件

var btn = document.getElementById('send-code-btn');
btn.addEventListener('click', function() {
  var now = Date.now();
  var startTime = localStorage.getItem('startTime');
  if (startTime && now - startTime < 60 * 1000) {
    alert('请勿频繁发送验证码');
  } else {
    localStroage.setItem('startTime', now);
    btn.disabled = true;
    countdown(60);
    // 发送短信验证码的代码
  }
});

这段代码负责绑定按钮的点击事件，并判断是否可以发送验证码。如果上一次发送验证码的时间距离当前时间不足60秒，那么弹出提示‘请勿频繁发送验证码’。否则，将当前时间存入localStorage中，按钮状态设置为不可点击，调用countdown函数开始倒计时操作，并执行发送短信验证码的代码。

3）处理页面刷新后的倒计时恢复

var btn = document.getElementById('send-code-btn');
var startTime = localStorage.getItem('startTime');
if (startTime) {
  var now = Date.now();
  var seconds = Math.floor((60 * 1000 - (now - startTime)) / 1000);
  if (seconds > 0) {
    btn.innerHTML = '重新发送(' + seconds + ')';
    btn.disabled = true;
    countdown(seconds);
  } else {
    localStorage.removeItem('startTime');
  }
} else {
  btn.innerHTML = '发送验证码';
}

这段代码负责在页面刷新后判断是否存在倒计时未结束的情况，如果存在，则根据存储的开始时间计算出剩余时间，调用countdown函数开始倒计时操作，并将按钮状态设置为不可点击。如果不存在倒计时未结束的情况，则将按钮状态初始化为可点击状态。

三、示例说明

示例一：只包含倒计时功能

<body>
  <button id="btn">点击发送验证码</button>
  <script>
    function countdown(seconds) {
      var btn = document.getElementById('btn');
      var timer = setInterval(function() {
        seconds--;
        if (seconds === 0) {
          clearInterval(timer);
          btn.innerHTML = '点击发送验证码';
          btn.disabled = false;
        } else {
          btn.innerHTML = '重新发送(' + seconds + ')';
        }
      }, 1000);
      btn.disabled = true;
      btn.innerHTML = '重新发送(' + seconds + ')';
    }

    document.getElementById('btn').addEventListener('click', function() {
      countdown(60);
    });
  </script>
</body>

这是一个只包含倒计时功能的示例，在点击按钮后，按钮状态变为不可点击状态，同时开始倒计时，60秒后恢复为可点击状态。

示例二：完整实现发送验证码功能

<body>
  <button id="btn">点击发送验证码</button>
  <script>
    function countdown(seconds) {
      var btn = document.getElementById('btn');
      var timer = setInterval(function() {
        seconds--;
        if (seconds === 0) {
          clearInterval(timer);
          btn.innerHTML = '点击发送验证码';
          btn.disabled = false;
          localStorage.removeItem('startTime');
        } else {
          btn.innerHTML = '重新发送(' + seconds + ')';
        }
      }, 1000);
      btn.disabled = true;
      btn.innerHTML = '重新发送(' + seconds + ')';
      localStorage.setItem('startTime', Date.now());
    }

    document.getElementById('btn').addEventListener('click', function() {
      var now = Date.now();
      var startTime = localStorage.getItem('startTime');
      if (startTime && now - startTime < 60 * 1000) {
        alert('请勿频繁发送验证码');
      } else {
        countdown(60);
        // 发送验证码的代码
      }
    });

    var startTime = localStorage.getItem('startTime');
    if (startTime) {
      var now = Date.now();
      var seconds = Math.floor((60 * 1000 - (now - startTime)) / 1000);
      if (seconds > 0) {
        var btn = document.getElementById('btn');
        btn.innerHTML = '重新发送(' + seconds + ')';
        btn.disabled = true;
        countdown(seconds);
      } else {
        localStorage.removeItem('startTime');
      }
    }
  </script>
</body>

这个示例实现了发送验证码的完整功能，并加入了防止刷新倒计时失效的机制。在点击按钮后，会判断上一次发送验证码的时间是否超过60秒，如果是则调用倒计时功能函数，并且执行发送验证码的代码。在页面刷新后，会判断是否存在倒计时未结束的情况，如果存在，则恢复倒计时功能，并保证倒计时正确地进行，保证了发送验证码功能的正常进行。