JS 实现获取验证码 倒计时功能

获取验证码倒计时功能在网页中使用得非常广泛，下面我将介绍JS如何实现这个功能，主要分为两个步骤：发送验证码请求和倒计时显示。

发送验证码请求

一般情况下，获取验证码的请求会发送给后端，后端会去生成验证码并发送给前端。前端只要在发送请求时携带相应的参数即可，下面是一个使用AJAX发送验证码请求的示例：

// 获取验证码按钮点击事件
$('#get-verify-code').click(function() {
  var phone = $('#phone').val();
  if (!(/^1[3456789]\d{9}$/.test(phone))) {
    alert('请输入正确的手机号码！');
    return false;
  }
  $.ajax({
    url: '/api/getVerifyCode',
    type: 'post',
    data: {
      phone: phone
    },
    success: function(res) {
      console.log(res);
    },
    error: function(err) {
      console.error(err);
    }
  });
});

在这个示例中，我们对手机号码进行了简单的正则校验，然后使用AJAX发送请求，请求的URL为/api/getVerifyCode，并且携带了手机号码的参数。

倒计时显示

发送验证码请求成功后，我们需要开始实现倒计时的效果，这个过程可以通过使用定时器实现。下面是一个使用定时器实现倒计时的示例：

var countDown = function(time) {
  var timer = setInterval(function() {
    time--;
    $('#get-verify-code').text('重新发送(' + time + ')');
    if (time == 0) {
      clearInterval(timer);
      $('#get-verify-code').text('重新发送');
      $('#get-verify-code').removeAttr('disabled');
    }
  }, 1000);
};

在这个示例中，我们定义了一个countdown函数，每秒执行一次倒计时计算。在每次计算时，我们将秒数减1，并将倒计时的剩余时间显示在获取验证码按钮上，当计算到0时，清除定时器并将获取验证码按钮文本改回原来的状态。

将这个函数与请求发送验证码的代码结合起来，完整的代码如下：

// 获取验证码按钮点击事件
$('#get-verify-code').click(function() {
  var phone = $('#phone').val();
  if (!(/^1[3456789]\d{9}$/.test(phone))) {
    alert('请输入正确的手机号码！');
    return false;
  }
  $('#get-verify-code').attr('disabled', 'disabled');
  $.ajax({
    url: '/api/getVerifyCode',
    type: 'post',
    data: {
      phone: phone
    },
    success: function(res) {
      console.log(res);
      countDown(60); // 60秒倒计时
    },
    error: function(err) {
      console.error(err);
      $('#get-verify-code').removeAttr('disabled');
    }
  });
});

var countDown = function(time) {
  var timer = setInterval(function() {
    time--;
    $('#get-verify-code').text('重新发送(' + time + ')');
    if (time == 0) {
      clearInterval(timer);
      $('#get-verify-code').text('重新发送');
      $('#get-verify-code').removeAttr('disabled');
    }
  }, 1000);
};

这个示例中，在验证码请求成功后，调用了倒计时函数，将60秒作为参数传入即可启动倒计时并在按钮上显示相应的文本。

总的来说，JS实现获取验证码倒计时功能分为两个步骤，包括发送验证码请求和倒计时显示。我们可以使用AJAX来发送请求，使用定时器来实现倒计时。