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

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

Umsetzungsideen:

Codebeispiel:

MySQL-Abfrage-Cache und Pufferpool

Remote-Entwicklung mit VSCode und SSH

Beispiel für die Konvertierung von Webpack-Bildern in Base64

Lösung für Primärschlüsselkonflikte, wenn innodb_index_stats beim Importieren von Sicherungsdaten einen Fehler meldet

Eine kurze Diskussion über das Design des Tomcat-Mehrschichtcontainers

Der Browser der Betaversion IE9 unterstützt HTML5/CSS3

Ajax jquery realisiert den Aktualisierungseffekt eines Div auf der Seite

So fügen Sie bedingte Ausdrücke zu Aggregatfunktionen in MySql hinzu

MySQL-Parameterbezogene Konzepte und Abfrageänderungsmethoden

Verwendung von VNode in Vue.js

Artikel empfehlen

Analyse des GTK-Treeview-Prinzips und der Verwendung

Automatische Zeilenumbrüche in HTML-Pre-Tags

Eine kurze Erläuterung des Sperrbereichs der MySQL-Next-Key-Sperre

Lösen Sie das Problem der Docker-Protokollmontage

Probleme bei der Verwendung mehrerer einfacher und dreifacher Anführungszeichen in MySQL concat

Einführung in die MySQL-Methode zum Löschen von Tabellendaten mit Fremdschlüsseleinschränkungen

So schreiben Sie eleganten JS-Code

Lösung für den Überlauf der HTML-Tabelle

Eine kurze Analyse der Unterschiede zwischen px, rem, em, vh und vw in CSS

Detaillierte Erklärung der Vuex-Umgebung

Eine allgemeine Methode zur Implementierung eines unendlichen Textkarussells mit nativem CSS

Implementierung einer Login-Seite basierend auf layui

Detaillierte Erläuterung der Lösung für npm ls-Fehler, die durch das fsevents-Modul unter Linux verursacht werden

Mysql implementiert drei Funktionen zum Feldspleißen

Tutorial zum Anzeigen und Ändern von MySQL-Zeichensätzen