Heim > Web-Frontend > js-Tutorial > Countdown-Funktion zum Versenden des Bestätigungscodes bei der Registrierung per Mobiltelefon

Countdown-Funktion zum Versenden des Bestätigungscodes bei der Registrierung per Mobiltelefon

小云云
Freigeben: 2017-12-21 10:03:17
Original
2958 Leute haben es durchsucht

In vielen Fällen gibt es unabhängig davon, was Sie registrieren, einen Bestätigungscode und es gibt auch eine Countdown-Funktion. Der Herausgeber dieses Artikels wird Ihnen ein einfaches Beispiel für das Senden eines Bestätigungscode-Countdowns für Mobilgeräte zeigen Telefonische Anmeldung. Es hat einen sehr guten Referenzwert. Ich hoffe, es kann anderen 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=&#39;mobile&#39;]").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(&#39;disabled&#39;, false);
//   $getCodeInput.removeAttribute("disabled");
   $getCodeInput.val("获取验证码");
   sessionStorage.removeItem("countdown");
   return;
  } else {
   $getCodeInput.attr(&#39;disabled&#39;, true);
   $getCodeInput.val("重新发送(" + countdown + ")");
   countdown--;
  }
  sessionStorage.setItem("countdown", countdown);
  window.setTimeout(function () {
   setCode($getCodeInput, countdown);
  }, 1000);
 }
</script>
Nach dem Login kopieren

Haben Sie es gelernt? Die Ideen sind die gleichen und ich hoffe, dass es allen hilft.

Verwandte Empfehlungen:

So verwenden Sie PHP zum Senden von SMS-Bestätigungscodes

Beispiel für die Implementierung der Thinkphp-Bestätigungscode-Anmeldefunktion

JS-Methode zur Implementierung des Bestätigungscodes

Das obige ist der detaillierte Inhalt vonCountdown-Funktion zum Versenden des Bestätigungscodes bei der Registrierung per Mobiltelefon. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage