Maison > interface Web > js tutoriel > Fonction de compte à rebours pour envoyer le code de vérification lors de l'inscription via téléphone mobile

Fonction de compte à rebours pour envoyer le code de vérification lors de l'inscription via téléphone mobile

小云云
Libérer: 2017-12-21 10:03:17
original
2932 Les gens l'ont consulté

Dans de nombreux cas, peu importe ce que vous enregistrez, il y aura un code de vérification, ainsi qu'une fonction de compte à rebours. L'éditeur de cet article partagera avec vous un exemple simple de la façon d'envoyer un compte à rebours de code de vérification pour mobile. inscription par téléphone. Il a une très bonne valeur de référence. Suivons l'éditeur pour y jeter un œil. J'espère que cela pourra aider les autres.

est la suivante :

()这里用的是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>
Copier après la connexion

L'avez-vous appris ? Les idées sont les mêmes et j'espère que cela pourra aider tout le monde.

Recommandations associées :

Comment utiliser php pour envoyer des codes de vérification par SMS

Exemple d'implémentation de la fonction de connexion du code de vérification Thinkphp

Méthode JS pour implémenter le code de vérification

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal