suchen

Heim  >  Artikel  >  Web-Frontend  >  Javascript sendet SMS-Bestätigungscode-Implementierungscode_Javascript-Kenntnisse

Javascript sendet SMS-Bestätigungscode-Implementierungscode_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:32:461877Durchsuche

In diesem Artikel wird zunächst das Prinzip des Sendens von Bestätigungscodes über Mobiltelefone analysiert und anschließend Javascript zum Senden von SMS-Bestätigungscodes implementiert. Die spezifischen Ideen lauten wie folgt:
Nachdem Sie auf die Schaltfläche „Bestätigungscode senden“ geklickt haben, werden auf den Schaltflächen „In 59 Sekunden erneut versuchen“, „In 58 Sekunden erneut versuchen“ usw. angezeigt, bis der Countdown 0 Sekunden erreicht und dann zu „Bestätigungscode senden“ zurückgekehrt ist. Die Schaltfläche ist während des Countdowns deaktiviert.

Der erste Schritt: Holen Sie sich die Schaltfläche, binden Sie das Ereignis, legen Sie die Timer-Variable und die Timing-Variable fest

Der zweite Schritt besteht darin, einen Timer hinzuzufügen , und der Timer verringert sich alle 1 Sekunde um 1, bis der Timer gelöscht wird, wenn der Timer kleiner oder gleich 0 ist. und die Schaltfläche kehrt zu „Bestätigungscode senden“ zurück, andernfalls wird „In X Sekunden erneut versuchen“

angezeigt

Rendering:

Implementierungscode: 

<!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>

Hinweis:

Beim Festlegen, ob die Schaltfläche deaktiviert ist: send.disabled=true; send.disabled=false;
Wahr und falsch können nicht zitiert werden! Wahr und falsch können nicht zitiert werden!
Sie können auch send.setAttribute('disabled','disabled');
verwenden oder send.removeAttribute('disabled');

Die oben genannten Codes zum Versenden von SMS-Bestätigungscodes über Javascript werden Ihnen hoffentlich hilfreich sein.

Stellungnahme：
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
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung der ready()-Methode von jquery event_jqueryNächster Artikel：Detaillierte Erläuterung der Verwendung der ready()-Methode von jquery event_jquery

In Verbindung stehende Artikel

Mehr sehen