JavaScript验证码倒计时

一、JS验证码倒计时60秒

在很多场景下，页面需要发送短信或者验证码验证用户的身份，但是过于频繁发送一方面会影响用户体验，另一方面也容易让网站受到攻击，所以使用倒计时进行控制是非常必要的。下面的代码演示了如何使用JavaScript实现一个60秒的验证码倒计时：

let time = 60; //倒计时时间
function countdown() {
  let btn = document.getElementById('btn');
  if (time == 0) {
    btn.disabled = false;
    btn.innerHTML = "获取验证码";
    time = 60;
    return;
  } else {
    btn.disabled = true;
    btn.innerHTML = "重新发送(" + time + ")";
    time--;
  }
  setTimeout(function() {
    countdown()
  }, 1000);
}

在上面的代码中，我们定义了一个变量time来记录倒计时时间，初始值为60。当用户点击获取验证码时，按钮会变为不可用状态，同时按钮显示的文字将变为“重新发送（60）”，其中的时间值是从time变量中获取。倒计时的功能通过setTimeout()函数实现，每隔1秒钟会执行一次countdown()函数，直到倒计时结束。

二、JS发送验证码倒计时

很多时候，在用户填写完手机号码并点击按钮发送验证码之后，才开始进行倒计时。下面这段代码演示了如何在点击发送按钮的时候开始倒计时：

let time = 60;
function countdown() {
  let btn = document.getElementById('btn');
  if (time == 0) {
    btn.disabled = false;
    btn.innerHTML = "获取验证码";
    time = 60;
    return;
  } else {
    btn.disabled = true;
    btn.innerHTML = "重新发送(" + time + ")";
    time--;
  }
  setTimeout(function() {
    countdown()
  }, 1000);
}
document.getElementById('sendBtn').addEventListener('click', function() {
  countdown();
});

在代码中，我们为发送按钮绑定了一个click事件，点击按钮会执行countdown()函数开始倒计时。当倒计时结束的时候，按钮将重新变为可用状态，并且按钮文字变为“获取验证码”。

三、JS验证码倒计时代码

下面的代码提供了一种更加通用的方法来实现验证码倒计时，通过传递参数来实现不同时间的倒计时。还可以添加回调函数进行更加灵活的操作：

function countdown(time, btnId, callback) {
  let btn = document.getElementById(btnId);
  btn.disabled = true;
  btn.innerHTML = "重新发送(" + time + ")";
  let timer = setInterval(function() {
    time--;
    btn.innerHTML = "重新发送(" + time + ")";
    if (time == 0) {
      clearInterval(timer);
      btn.disabled = false;
      btn.innerHTML = "获取验证码";
      if (callback) {
        callback();
      }
    }
  }, 1000);
}

在上述的代码中，我们定义了一个countdown()函数，它接收三个参数，分别是倒计时时间、按钮的ID和用于清除倒计时的回调函数。当函数被调用时，按钮会变为不可用状态，并且文字显示为“重新发送（60）”，每隔1秒钟会更新一次时间。当倒计时结束时，按钮会重新变为可用状态，并且文字会变为“获取验证码”，如果传递了回调函数，就会执行回调函数。

四、JS验证码倒计时60秒

下面这段代码提供了另一种实现60秒验证码倒计时的方法，它通过使用setInterval()函数来实现，并且可以在倒计时结束时重置时间：

let time = 60;
let timer = null;
function countdown() {
  let btn = document.getElementById('btn');
  btn.disabled = true;
  timer = setInterval(function() {
    if (time <= 0) {
      clearInterval(timer);
      btn.disabled = false;
      btn.innerHTML = "获取验证码";
      time = 60;
    } else {
      btn.innerHTML = "重新发送(" + time + "s)";
      time--;
    }
  }, 1000);
}

在上述代码中，我们创建了一个变量来记录倒计时时间，初始值为60秒。在countdown()函数中，我们通过setInterval()函数每秒更新一次时间，当倒计时结束时，清除计时器，按钮恢复为可用状态，并且倒计时时间变为60秒。

五、JS获取验证码倒计时

下面这段代码提供了一种获取验证码倒计时的实现方法，通过ajax获取验证码之后开始倒计时：

function getCode() {
  $.ajax({
    type: 'POST',
    url: '/getCode',
    data: {
      phoneNum: $('#phone').val()
    },
    success: function(data) {
      if (data.code == 200) {
        $('#getCode').attr('disabled', true);
        $('#getCode').html('重新发送(60s)');
        var time = 60;
        var countdown = setInterval(function() {
          time--;
          $('#getCode').html('重新发送(' + time + 's)');
          if (time <= 0) {
            clearInterval(countdown);
            $('#getCode').html('获取验证码');
            $('#getCode').attr('disabled', false);
          }
        }, 1000);
      } else {
        alert('验证码获取失败');
      }
    }
  });
}

上述代码中，在点击获取验证码按钮之后，通过ajax向后台请求验证码，获取成功后开始倒计时。在倒计时过程中，按钮会变为不可用状态，倒计时结束之后按钮会重新变为可用状态，按钮文字变为“获取验证码”。

六、JS短信验证码倒计时

下面这段代码提供了一种短信验证码倒计时的实现方法，通过使用cookie来保存倒计时开始的时间和结束的时间，每次刷新页面都会自动进行倒计时：

function setBtnText(time) {
  $('#getCode').html(time + '秒后重新发送');
  $('#getCode').addClass('re-get');
  setTimeout(function() {
    $('#getCode').html('获取验证码');
    $('#getCode').removeClass('re-get');
  }, time * 1000);
}

function timer(btn) {
  var time = getCookie(btn);
  if (time && (new Date().getTime() - time.start) < (time.seconds * 1000)) {
    setBtnText(Math.floor((time.seconds * 1000 - (new Date().getTime() - time.start)) / 1000));
    var timer = setInterval(function() {
      if ((new Date().getTime() - time.start) >= (time.seconds * 1000)) {
        clearInterval(timer);
        setCookie(btn, '', -1);
      } else {
        setBtnText(Math.floor((time.seconds * 1000 - (new Date().getTime() - time.start)) / 1000));
      }
    }, 1000);
  } else {
    setBtnText(60);
  }
}

$('#getCode').on('click', function() {
  if (!$(this).hasClass('re-get')) {
    setCookie('getCodeBtn', {
      seconds: 60,
      start: new Date().getTime()
    }, 60);
    timer('getCodeBtn');
  }
});

function setCookie(cname, cvalue, seconds) {
  var d = new Date();
  d.setTime(d.getTime() + (seconds * 1000));
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + encodeURIComponent(JSON.stringify(cvalue)) + ";path=/;expires=" + expires;
}

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1);
    if (c.indexOf(name) == 0) {
      var value = c.substring(name.length, c.length);
      return JSON.parse(decodeURIComponent(value));
    }
  }
  return "";
}

在上述代码中，我们将倒计时开始的时间和倒计时结束的时间通过cookie来保存。当点击获取验证码按钮之后，如果没有进行倒计时则开始进行倒计时，如果已经进行了倒计时，则从cookie中读取开始时间和结束时间进行继续倒计时。在倒计时过程中，按钮会变为不可用状态，倒计时结束之后按钮会重新变为可用状态，按钮文字变为“获取验证码”。