suchen

Heim >Web-Frontend >js-Tutorial >JS implementiert SMS-Bestätigungscode

JS implementiert SMS-Bestätigungscode

巴扎黑
巴扎黑Original
2017-08-11 10:16:432510Durchsuche

Um die SMS-Bestätigungscode-Schnittstelle zu implementieren, müssen Sie zunächst ein Textfeld mit einer Schaltfläche daneben haben. Wenn Sie darauf klicken, startet der Countdown. Als nächstes werde ich in diesem Artikel mit Ihnen teilen, wie Sie eine einfache SMS-Bestätigungscode-Schnittstelle mit js implementieren. Für diejenigen, die interessiert sind, lesen Sie bitte

1. So implementieren Sie die SMS-Bestätigungscode-Schnittstelle Es muss zunächst ein Textfeld mit einer Schaltfläche daneben vorhanden sein.

2. Erstellen Sie zuerst ein Textfeld und eine Schaltfläche, legen Sie die entsprechende ID für die Schaltfläche fest, rufen Sie dann das Schaltflächenelement über die ID in js ab und führen Sie Operationen daran aus. Gleichzeitig sollten die Countdown-Zeit und die Timer-Variablen so eingestellt werden, dass nach dem Klicken auf die Schaltfläche „Senden“ kein weiteres Klicken auf die Schaltfläche zum erneuten Senden möglich ist, bevor der Countdown abgelaufen ist.

3. Nachdem der Countdown abgelaufen ist, löschen Sie den Timer und ändern Sie den Text in „Bestätigungscode erneut senden“, um die Funktion zur Betätigung der Schaltfläche wiederherzustellen. Starten Sie gleichzeitig den Countdown ab 5 Sekunden kann noch einmal darauf klicken. 


<head> 
  <meta charset="UTF-8"> 
  <title>js发送短信验证码</title> 
</head> 
<body> 
  <input type="text"/><button id="bt01">发送验证码</button> 
</body> 
<script type="text/javascript"> 
  var bt01 = document.getElementById("bt01"); 
  bt01.onclick = function() { 
    bt01.disabled = true;  //当点击后倒计时时候不能点击此按钮 
    var time = 5;  //倒计时5秒 
    var timer = setInterval(fun1, 1000);  //设置定时器 
    function fun1() { 
      time--; 
      if(time>=0) { 
        bt01.innerHTML = time + "s后重新发送"; 
      }else{ 
        bt01.innerHTML = "重新发送验证码"; 
        bt01.disabled = false;  //倒计时结束能够重新点击发送的按钮 
        clearTimeout(timer);  //清除定时器 
        time = 5;  //设置循环重新开始条件 
      } 
    } 
  } 
</script>

Das obige ist der detaillierte Inhalt vonJS implementiert SMS-Bestätigungscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Vergleichen Sie die Unterschiede und Zusammenhänge zwischen Express- und Koa-Middleware-MusternNächster Artikel：Vergleichen Sie die Unterschiede und Zusammenhänge zwischen Express- und Koa-Middleware-Mustern

In Verbindung stehende Artikel

Mehr sehen