jQuery implementiert die Funktion zum Deaktivieren der Steuertaste zum Senden des Bestätigungscodes
|
Gewünschte Wirkung: Nach dem Klick auf die Übermittlung des Bestätigungscodes wird der Button deaktiviert und nach 5 Sekunden wieder aktiviert.
Schaltfläche nach dem Klicken auf „Senden“ deaktivieren
Nach 5 Sekunden die Sperre aufheben und erneut senden
Der Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dokument</title>
</Kopf>
<Text>
<Eingabetyp="Text">
<input type="button" value="Senden">
<script src="js/jquery-1.12.4.min.js"></script>
<Skript>
// Holen Sie sich das Element var $btn = $("input:button")
// Schaltflächenklickereignis hinzufügen $btn.click(function () {
// Definieren Sie eine Variable zum Speichern der Zeitzahl var n = 5;
// Button deaktivieren // Textinhalt des Buttons ersetzen $(this).prop("disabled",true).val(n + "s und dann nochmal senden")
//Ändere den Countdown-Inhalt alle 1 s.//Verwende den Timer, um die Zeit alle 1 s zu reduzierenvar timer = setInterval(() => {
N--;
// Der Textinhalt ändert sich // Der Standardwert innerhalb des Timers ist window
$(this).val(n + "s nach dem erneuten Senden")
// Wenn die Zeit 0 erreicht, stoppe den Timer if (n <= 0) {
Intervall löschen(Timer)
// Nach 5 Sekunden müssen Sie mit dem Senden des Textes fortfahren. // Deaktivieren Sie die Schaltfläche $(this).val("Resend").prop("disabled",false)
}
},1000)
})
</Skript>
</body>
</html>Dies ist das Ende dieses Artikels zum Deaktivieren der Schaltfläche zum Senden des Bestätigungscodes mithilfe von jQuery. Weitere Informationen zum Deaktivieren der jQuery-Schaltfläche finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Docker-Installation Tomcat Dubbo-Admin-Instanz-Kenntnisse
>>: Detaillierte Erklärung zur Verwendung von Join zur Optimierung von SQL in MySQL
Artikel empfehlen
Detaillierte Erklärung der Methoden und Eigenschaften von Vue
Vue-Methoden und -Eigenschaften 1. Methoden Verwe...
So richten Sie die Verwendung der chinesischen Eingabemethode in Ubuntu 18.04 ein
In der neuesten Version von Ubuntu müssen Benutze...
Wissen zur Suchmaschinenoptimierung, auf das Sie beim Webdesign achten sollten
1. Linklayout der neuen Site-Startseite 1. Die Pos...
Beispielcode zur Implementierung von horizontalem Endlos-Scrollen mit reinem CSS3
Die Beispiele in diesem Artikel sind alle in klei...
CSS Skills Collection – Klassiker unter den Klassikern
Entfernen Sie das gepunktete Kästchen auf dem Link...
Verwendung der hasOwnProperty-Methode des js-Attributobjekts
Die Methode hasOwnProperty() des Objekts gibt ein...
So erweitern Sie die Kapazität der virtuellen Festplatte (VDI-Datei) von VirtualBox (grafisches Tutorial)
Suchen Sie das Installationsverzeichnis von Virtu...
MySQL-Anweisungsanordnung und zusammenfassende Einführung
SQL-Anweisungen (Structured Query Language), also...
Detaillierte Erläuterung des Implementierungsprinzips von ACID-Transaktionen in MySQL
Einführung Beginnen wir wie immer mit einer Szene...
Die umfassendste Erklärung des Sperrmechanismus in MySQL
Inhaltsverzeichnis Vorwort Globale Sperre Vollstä...
So führen Sie py-Dateien direkt unter Linux aus
1. Erstellen Sie zuerst die Datei (wechseln Sie p...
Mehrere Möglichkeiten zur Verwendung von require/import-Schlüsselwörtern zum Importieren lokaler Bilder in einer v-for-Schleife
Inhaltsverzeichnis Problembeschreibung Methode 1 ...
MySQL Master-Slave-Synchronisation, Implementierungsprinzip des Transaktions-Rollbacks
BinLog BinLog ist ein Binärprotokoll, das alle Än...
Zusammenfassung zur Verwendung des MySQL-Autorisierungsbefehls „grant“
So verwenden Sie den MySQL-Autorisierungsbefehl „...
JavaScript verwendet Canvas zum Zeichnen von Koordinaten und Linien
In diesem Artikel wird der spezifische Code zur V...