Eine einfache Methode zur Implementierung des Countdowns des bei der Mobiltelefonregistrierung gesendeten Bestätigungscodes

In diesem Artikel wird hauptsächlich ein einfaches Beispiel für einen Countdown zum Senden eines Bestätigungscodes während der Mobiltelefonregistrierung vorgestellt. Es hat einen sehr guten Referenzwert. Ich hoffe, es wird allen helfen.

lautet wie folgt:

()这里用的是input做的点击发送验证码
<input type="number" class="input" name="mobile" placeholder="手机号" style="border: none"

<input class="hui_kuang"style="width: 30%;text-align: center;height: 42px"onclick="setTime(this)" value=&#39;获取验证码&#39;>
<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>

Verwandte Empfehlungen:

Verwenden Sie Angular.js, um die Schaltfläche für den 60-Sekunden-Countdown für den Bestätigungscode abzurufen Methode

Beispielanalyse des 60-s-Countdowns zum Erhalten des Bestätigungscodes im WeChat-Applet

JS-Implementierungsmethode des Countdowns zum Erhalten des Bestätigungscodes

Das obige ist der detaillierte Inhalt vonEine einfache Methode zur Implementierung des Countdowns des bei der Mobiltelefonregistrierung gesendeten Bestätigungscodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!