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)) {
        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中讀取開始時間和結束時間進行繼續倒計時。在倒計時過程中，按鈕會變為不可用狀態，倒計時結束之後按鈕會重新變為可用狀態，按鈕文字變為「獲取驗證碼」。