JavaScript-Implementierung des Verifizierungscode-Falls
|
In diesem Artikel wird der spezifische Code für JavaScript zur Erzielung des Bestätigungscode-Effekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Im heutigen Fall ist der Effekt wie folgt:
Bei der Umsetzung dieses Falls gibt es eigentlich nicht viele Schwierigkeiten. Schauen wir uns das gemeinsam an. Die Implementierung von HTML und CSS wird hier nicht erläutert. Sie können es selbst implementieren, indem Sie den folgenden Code vergleichen und auf die Details achten. Schauen wir uns als nächstes die Implementierung von js an: Wir müssen zwei Dinge tun: 1. Realisieren Sie die zufällige Generierung von Bestätigungscodes, sodass diese generiert werden können, wenn die Seite aktualisiert oder zum Ändern angeklickt wird Zuerst müssen wir eine For-Schleife und Zweitens müssen wir nur die vom Benutzer über Weitere Details sind im Code zu finden. <!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>Dokument</title>
<Stil>
.Container{
Breite: 400px;
Höhe: 100px;
Rand: 100px automatisch;
Hintergrundfarbe: hsla (180, 73 %, 78 %, 0,199);
Rahmenradius: 20px;
Textausrichtung: zentriert;
Polsterung: 20px;
}
#überprüfen{
Anzeige: Inline-Block;
Breite: 100px;
Höhe: 30px;
Textausrichtung: zentriert;
Hintergrundfarbe: rgba(128, 128, 128, 0,158);
Farbe: blau;
Schriftgröße: 26px;
Schriftstil: kursiv;
Buchstabenabstand: 2px;
Schriftfamilie: Arial, Helvetica, serifenlos;
Rand unten: 10px;
}
.ma{
Rand unten: 12px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<div>
<span id="check">adf34y</span>
<a href="#" id="checka">Wenn es nicht klar ist, ändern Sie es</a>
</div>
<div Klasse="ma">
<label for="zheng">Bestätigungscode</label>
<Eingabetyp="Text" id="zheng">
</div>
<button id="btn">OK</button>
</div>
<Skript>
sei Summe=[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
var check = document.getElementById("check");
Variablencode;
Funktion Spaß () {
lass str="";
für (lass i = 0; i < 6; i++) {
let pos=Math.round(Math.random()*15); //Beachten Sie diese Schreibweise, holen Sie sich die Zufallszahl str+=sum[pos];
}
check.innerHTML=str;
gibt str zurück;
}
fenster.onload = funktion(){
Code=Spaß();
}
let checka = document.getElementById("checka");
checka.onclick=Funktion(){
Code=Spaß();
}
let btn = document.getElementById("btn");
btn.onclick=Funktion(){
Lassen Sie t = document.getElementById("zheng").value;
console.log(t)
wenn(t==code){
Warnung("richtig");
Code=Spaß();
document.getElementById("zheng").value="";
}
anders{
Warnung("Fehler");
document.getElementById("zheng").value="";
}
}
</Skript>
</body>
</html>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:
|
<<: 10 zu wenig genutzte oder missverstandene HTML-Tags
Artikel empfehlen
Einführung in das MySql-Cache-Abfrageprinzip sowie in die Cache-Überwachung und Indexüberwachung
Abfrage-Cache 1. Funktionsprinzip des Abfrage-Cac...
Beispiele für den Import und Export von MySQL-Tabellendaten
Dieser Artikel beschreibt die Import- und Exportv...
Beispielcode zur Implementierung des Verlaufs-Tag-Menüs mit vue+elementui+vuex+sessionStorage
Im Allgemeinen muss, nachdem sich auf der linken ...
Detaillierte Interpretation der Datei /etc/fstab im Linux-System
Vorwort [root@localhost ~]# cat /etc/fstab # # /e...
Implementierung des React-Konfigurations-Subroutings
1. Die Komponente First.js hat Unterkomponenten: ...
MySQL-Vorkompilierung in einem Artikel verstehen
1. Vorteile der Vorkompilierung Wir haben alle di...
Implementierung von Docker zum Aufbau eines privaten Warehouse (Registrierung und Harbor)
Da immer mehr Docker-Images verwendet werden, mus...
Detailliertes Tutorial zum Minimieren der Installation der virtuellen CentOS 8.1-Maschine in VirtualBox
1. Laden Sie zugehörige Tools und Bilder herunter...
Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung
Artikel-Mindmap Warum Master-Slave-Replikation un...
Der Unterschied zwischen den Feldtypen char, varchar und Text in MySQL
In MySQL können alle Felder der Typen char, varch...
So installieren Sie MySQL 8.0 und melden sich bei MySQL unter MacOS an
Folgen Sie dem offiziellen Tutorial, laden Sie da...
MySQL zeigt die maximale Anzahl von Verbindungen an und ändert die maximale Anzahl von Verbindungen
MySQL Maximale Anzahl von Verbindungen anzeigen u...
Beispielcode zur Implementierung einer Hohlmaskenebene mit CSS
Inhalt dieses Artikels: Seitenhohlmaskenebene, Se...
Eine sehr detaillierte Zusammenfassung der Kommunikation zwischen Vue-Komponenten
Inhaltsverzeichnis Vorwort 1. Props, $emit Einweg...
Detailliertes grafisches Tutorial zur Installation und Deinstallation von Tomcat8 unter Linux
[ Linux-Installation von Tomcat8 ] Tomcat deinsta...