Maison > Article > interface Web > Javascript envoie des SMS de vérification du code de mise en œuvre des compétences code_javascript

Javascript envoie des SMS de vérification du code de mise en œuvre des compétences code_javascript

WBOYoriginal: 2016-05-16 15:32:461842parcourir

Cet article analyse d'abord le principe de l'envoi de codes de vérification par téléphones mobiles, puis implémente javascript pour envoyer des codes de vérification par SMS :
Après avoir cliqué sur le bouton « Envoyer le code de vérification », les boutons afficheront « Réessayer dans 59 secondes », « Réessayer dans 58 secondes »... jusqu'à ce que le compte à rebours atteigne 0 seconde, puis revenir à « Envoyer le code de vérification ». Le bouton est désactivé pendant le compte à rebours.

La première étape, obtenez le bouton, liez l'événement, définissez la variable de minuterie et la variable de synchronisation

La deuxième étape consiste à ajouter une minuterie , et la minuterie diminuera de 1 toutes les 1 seconde jusqu'à ce que la minuterie soit effacée lorsque la minuterie est inférieure ou égale à 0, et le bouton reviendra à "Envoyer le code de vérification" », sinon il s'affichera comme « Réessayer dans X secondes »

Rendu :

Code d'implémentation :

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript">
  window.onload=function(){
    var send=document.getElementById('send'),
      times=60,
      timer=null;
    send.onclick=function(){
     // 计时开始
     var that = this;
      this.disabled=true;
      timer = setInterval(function(){
        times --;
        that.value = times + "秒后重试";
        if(times <= 0){
          that.disabled =false;
          that.value = "发送验证码";
          clearInterval(timer);
          times = 60;
        }
        //console.log(times);
      },1000);  
    }  
  } 
  </script>
</head>
<body>
  <input type="button" id="send" value="发送验证码">
</body>
</html>

Remarque :

Lors de la définition si le bouton est désactivé, send.disabled=true; send.disabled=false;
Vrai et faux ne peuvent pas être cités ! Vrai et faux ne peuvent pas être cités ! Sinon la valeur sera toujours vraie !
Vous pouvez également utiliser send.setAttribute('disabled','disabled');
ou send.removeAttribute('disabled');

Ce qui précède contient tous les codes d'envoi de codes de vérification par SMS via javascript partagés avec vous. J'espère que cela sera utile à votre étude.

Déclaration：

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

Article précédent：Explication détaillée de l'utilisation de la méthode ready() de jquery event_jqueryArticle suivant：Explication détaillée de l'utilisation de la méthode ready() de jquery event_jquery

Articles Liés

Voir plus