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
Mybatis-Implementierungsmethode für Fuzzy-Abfragen
Mybatis-Implementierungsmethode für Fuzzy-Abfrage...
So installieren Sie ElasticSearch auf Docker in einem Artikel
Inhaltsverzeichnis Vorwort 1. Docker installieren...
So installieren und konfigurieren Sie MySQL und ändern das Root-Passwort
1. Installation apt-get install mysql-server erfo...
jQuery-Plugin zur Implementierung des sekundären Akkordeonmenüs
Dieser Artikel verwendet ein jQuery-Plugin, um ei...
Eine kurze Diskussion über das Problem des vergessenen MySQL-Passworts und des Anmeldefehlers
Wenn Sie Ihr MySQL-Anmeldekennwort vergessen, ist...
Schritte für IDEA zur Integration von Docker zur Realisierung einer Remote-Bereitstellung
1. Aktivieren Sie den Remotezugriff auf den Docke...
Detaillierte Erklärung der HTML-Style-Tags und der zugehörigen CSS-Referenzen
HTML-Style-Tag Stil-Tag - Verwenden Sie dieses Ta...
Der einfachste Weg, MySQL 5.7.20 mit yum in CentOS 7 zu installieren
Die Standarddatenbank von CentOS7 ist MariaDB, ab...
Schleifenmethoden und verschiedene Durchlaufmethoden in js
Inhaltsverzeichnis for-Schleife While-Schleife do...
Lösung für den Fehler beim Laden der dynamischen Bibliothek, wenn ein Linux-Programm ausgeführt wird
Dynamische Bibliothek kann unter Linux nicht gela...
Schritte zum Verpacken und Freigeben des Vue-Projekts
Inhaltsverzeichnis 1. Übergang von der Entwicklun...
Detaillierte Erläuterung mehrerer Methoden zur Reduzierung der JS-Array-Dimensionalität
Dimensionsreduzierung eines zweidimensionalen Arr...
MySQL implementiert eine Funktion ähnlich der MySQL-Methode oder gespeicherten Prozedur connect_by_isleaf
In letzter Zeit gibt es eine besonders ungewöhnli...
Installationsschritte von Docker-CE auf dem Raspberry Pi 4b Ubuntu19-Server
Das Raspberry Pi-Modell ist 4b, 1 G RAM. Das Syst...
Detailliertes Tutorial zur Bereitstellung einer OpenStack-Umgebung basierend auf CentOS (OpenStack-Installation)
Effektanzeige: Controllerknoten zur Umgebungsvorb...