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

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

WBOY

Libérer： 2016-05-16 15:32:46

original

1842 Les gens l'ont consulté

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>

Copier après la connexion

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.