web開發中如何實現手機注冊發送驗證碼倒計時

這篇文章主要介紹了web開發中如何實現手機注冊發送驗證碼倒計時，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

如下所示：

()這里用的是input做的點擊發送驗證碼
<input type="number" class="input" name="mobile" placeholder="手機號" 

<input class="hui_kuang"onclick="setTime(this)" value='獲取驗證碼'>
<script>
　　
//頁面初始化獲取倒計時數字（避免在倒計時時用戶刷新瀏覽器導致倒計時歸零）
 var $getCodeInput = $(".hui_kuang");
 var sessionCountdown = sessionStorage.getItem("countdown");
 if (!sessionCountdown) {
  $(".hui_kuang").val("獲取驗證碼")
 } else {
  $(".hui_kuang").val("重新發送(" + sessionCountdown + ")");
  setCode($getCodeInput, sessionCountdown);
 }
 //獲取驗證碼
 function setTime() {
  var remobile = $("#registForm input[name='mobile']").val();
  if (!remobile) {
   alert("請輸入手機號碼")
   return;

  }
  if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(remobile))) {
   alert("請輸入有效的手機號碼")
   return;
  } else {
   setCode($getCodeInput, 60);
  }

 }
 //發送驗證碼倒計時
 function setCode($getCodeInput, countdown) {
  if (countdown == 0) {
   $getCodeInput.attr('disabled', false);
//   $getCodeInput.removeAttribute("disabled");
   $getCodeInput.val("獲取驗證碼");
   sessionStorage.removeItem("countdown");
   return;
  } else {
   $getCodeInput.attr('disabled', true);
   $getCodeInput.val("重新發送(" + countdown + ")");
   countdown--;
  }
  sessionStorage.setItem("countdown", countdown);
  window.setTimeout(function () {
   setCode($getCodeInput, countdown);
  }, 1000);
 }
</script>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“web開發中如何實現手機注冊發送驗證碼倒計時”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!