JS implementiert SMS-Bestätigungscode-js-Tutorial-php.cn

JS implementiert SMS-Bestätigungscode

巴扎黑

Freigeben： 2017-08-11 10:16:43

Original

2487 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!