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
Erfahren Sie in einem Artikel mehr über den Anzeigemodus für CSS-Beschriftungen
Tag-Typ (Anzeigemodus) HTML-Tags werden im Allgem...
Detaillierte Erläuterung von 30 SQL-Abfrageoptimierungstechniken für MySQL-Zehnmillionen großer Datenmengen
1. Um die Abfrage zu optimieren, sollten Sie voll...
HeidiSQL-Tool zum Exportieren und Importieren von MySQL-Daten
Um den Export und Import von Daten in SQL zu erle...
Einführung in das Linux-Netzwerksystem
Inhaltsverzeichnis Netzwerk Informationen Ändern ...
Tutorial zur Installation und Konfiguration einer virtuellen Linux-Maschine unter dem Windows-Betriebssystem
Vorwort Bei der Arbeit müssen wir häufig in einer...
JavaScript imitiert den Jingdong-Lupeneffekt
In diesem Artikel wird der spezifische Code für J...
Detaillierte Erklärung der 4 Möglichkeiten zum Importieren von CSS-Dateien: inline, inline, extern und importiert
CSS-Importmethode - Inline Durch das Style-Tag-At...
So stellen Sie eine einzelne Datenbank oder Tabelle in MySQL wieder her und mögliche Fallstricke
Vorwort: Das am häufigsten verwendete logische My...
Detaillierte Erklärung des HTML-Seitenkopfcodebeispiels
Wissenspunkt 1: Legen Sie die Basis-URL der Webse...
So verwenden Sie JavaScript zum Implementieren von Sortieralgorithmen
Inhaltsverzeichnis Blasensortierung Auswahl Sorti...
HTML Gewichtsverlust Optimieren Sie HTML-Tags zum Erstellen von Webseiten
HTML 4 HTML (nicht XHTML), MIME-Typ ist text/html...
So implementieren Sie die Größenanpassung mobiler Webseiten
Ich habe das vorliegende Projekt endlich abgeschl...
Docker-Bereinigungsumgebungsvorgang
Beginnen Sie vorsichtig mit der Reinigung! Auflis...
MySQL implementiert eine Lösung ähnlich der Oracle-Sequenz
MySQL implementiert Oracle-ähnliche Sequenzen Ora...
Wissen Sie, wie man Mock in einem Vue-Projekt verwendet?
Inhaltsverzeichnis Erster Schritt: Der zweite Sch...