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

JS implementiert SMS-Bestätigungscode

Aug 11, 2017 am 10:16 AM
javascript 短信 验证

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.


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

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

Erklärung dieser Website
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

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So überprüfen Sie die Signatur in PDF So überprüfen Sie die Signatur in PDF Feb 18, 2024 pm 05:33 PM

So überprüfen Sie die Signatur in PDF

So richten Sie die SMS-Blockierung auf dem iPhone ein So richten Sie die SMS-Blockierung auf dem iPhone ein Feb 24, 2024 pm 01:48 PM

So richten Sie die SMS-Blockierung auf dem iPhone ein

Detaillierte Methode zum Entsperren mithilfe der freundunterstützten WeChat-Verifizierung Detaillierte Methode zum Entsperren mithilfe der freundunterstützten WeChat-Verifizierung Mar 25, 2024 pm 01:26 PM

Detaillierte Methode zum Entsperren mithilfe der freundunterstützten WeChat-Verifizierung

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript

Neue Funktionen in PHP 8: Verifizierung und Signierung hinzugefügt Neue Funktionen in PHP 8: Verifizierung und Signierung hinzugefügt Mar 27, 2024 am 08:21 AM

Neue Funktionen in PHP 8: Verifizierung und Signierung hinzugefügt

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript Dec 17, 2023 am 09:39 AM

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript

Wie kann das Problem gelöst werden, dass die Steam-Anmeldung bei der Überprüfung des mobilen Tokens hängen bleibt? Wie kann das Problem gelöst werden, dass die Steam-Anmeldung bei der Überprüfung des mobilen Tokens hängen bleibt? Mar 14, 2024 pm 07:35 PM

Wie kann das Problem gelöst werden, dass die Steam-Anmeldung bei der Überprüfung des mobilen Tokens hängen bleibt?

See all articles