JavaScript zur Implementierung des Countdowns für den SMS-Versand

In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung des Countdowns für das Senden von SMS zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Umsetzungsideen:

1. js ruft das Elementobjekt der Schaltfläche „Senden“ ab
2. Sendeintervall festlegen (globale Variable)
3. Binden Sie das Klickereignis an das Senden-Button-Elementobjekt - - -onclick,
Klicken Sie auf Ereignishandler:
① Nach dem Klicken wird die Schaltfläche auf deaktiviert gesetzt – deaktiviert: true;
② Verwenden Sie die Timing-Funktion mit einem Zeitintervall von 1 Sekunde.
Funktionshandler für zeitgesteuerte Funktionsaufrufe:
Bestimmen Sie, ob die Zeit 0 ist
Nicht 0 - - - Die Beschreibung der Schaltfläche ändert sich in: Wie viele Sekunden verbleiben, und die Zeit wird um 1 reduziert
Wenn der Wert 0 ist, kann die Schaltfläche angeklickt werden und die Beschreibung darin wird auf „Senden“ zurückgesetzt.

Codebeispiel:

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>SMS senden</title>
    <Stil>
        .Kasten {
            Breite: 360px;
            Rand: 100px automatisch;
        }
    </Stil>
</Kopf>

<Text>
    <div Klasse="Box">
        Mobiltelefonnummer: <input type="number">
        <button>SMS senden</button>
    </div>

    <Skript>
        var btn = document.querySelector('Schaltfläche');
        var Zeit = 10;
        btn.addEventListener('klicken', function() {
            btn.deaktiviert = wahr;
            var Timer = Intervall setzen(Funktion() {
                wenn (Zeit == 0) {
                    // Timer löschen und Schaltfläche wiederherstellen clearInterval(timer);
                    btn.deaktiviert = falsch;
                    btn.innerHTML = 'SMS senden';
                    Zeit = 10;
                } anders {
                    btn.innerHTML = 'verbleibend' + Zeit + 'Sekunden';
                    Zeit--;
                }
            }, 1000);
        });
    </Skript>
</body>

</html>

Seiteneffekt:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

JavaScript implementiert einen 60-Sekunden-SMS-Countdown
JS implementiert die Countdown-Funktion der Schaltfläche nach dem Senden einer SMS-Bestätigung (um zu verhindern, dass der Countdown zur Aktualisierung fehlschlägt).
JS erhält den Implementierungscode für den Countdown des SMS-Bestätigungscodes
js implementiert eine Countdown-Funktion zum Senden von SMS (regelmäßige Überprüfung)
js implementiert einen 5-Sekunden-Countdown zum erneuten Senden der SMS-Funktion
JS implementiert die Funktion zum Abrufen eines SMS-Bestätigungscodes und eines Countdowns, wenn sich Benutzer registrieren
Implementierung der Countdown-Funktion für JS-SMS-Bestätigungscodes (kein Bestätigungscode, nur Countdown)
Eine einfache Möglichkeit, einen Countdown zum Senden von SMS in js zu implementieren
Implementieren Sie die Countdown-Funktion nach dem Senden des SMS-Bestätigungscodes basierend auf JS (ignorieren Sie die Seitenaktualisierung und führen Sie die Countdown-Funktion nicht aus, wenn die Seite geschlossen ist).
Implementierung eines SMS-Button-Countdowns basierend auf JavaScript (super einfach)

<<: Lösen Sie das Problem mehrerer Listener, die beim Starten von Tomcat in Idea gemeldet werden

>>: So migrieren Sie lokales MySQL in eine Serverdatenbank

WeChat-Applet implementiert Taschenrechnerfunktion

JavaScript zur Implementierung des Countdowns für den SMS-Versand

Umsetzungsideen:

Codebeispiel:

WeChat-Applet implementiert Taschenrechnerfunktion

Vue Grundlagen Listener Detaillierte Erklärung

Die Methode zur Änderung vergessener MySql-Passwörter ist für Versionen ab 5.7 geeignet.

5 gängige Szenarien und Beispiele für die Destrukturierungszuweisung in JavaScript

Detaillierte Erklärung der Funktionen jedes Ports von Tomcat

Ein Leitfaden zum Schreiben flexibler, stabiler und qualitativ hochwertiger HTML- und CSS-Codestandards

Einfaches Docker Swarm-Tutorial

WePY-Cloud-Entwicklungspraxis im Linux-Befehlsabfrage-Applet

Detaillierte Erklärung zur Abfrage von Feldern, die „%“ enthalten, in MySQL (ESCAPE-Verwendung)

Entwurf und Implementierung einer kaskadierenden Dropdown-Box in Vue

Artikel empfehlen

Implementierung des CSS-Animationseffekts für dynamische Höhenübergänge

Sortierung und Paginierung von MySQL-Abfragen

Attribute und Verwendung von INS- und DEL-Tags

Tomcat-Konfiguration und wie man ihn in Eclipse startet

Implementierung der Webpack-Codefragmentierung

So verwenden Sie vue3+TypeScript+vue-router

17 404-Seiten, die Sie erleben möchten

So installieren Sie die Linux-Onlinesoftware gcc online

CSS zum Implementieren von QQ-Browserfunktionen

Zusammenfassung einiger gängiger Techniken in der Front-End-Entwicklung

So deaktivieren Sie Anzeigen in der Terminal-Willkommensnachricht in Ubuntu Server

So installieren Sie pyenv unter Linux

Detailliertes Tutorial zur Installation von MariaDB auf CentOS 8

Schritte zur Implementierung des cuda10.1-Treibers bei der Installation von Ubuntu

HTML+CSS-Beispielcode für zusammengeführte Tabellenränder