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
Vue implementiert einfache Kommentarfunktion
In diesem Artikel wird der spezifische Code von V...
N Möglichkeiten, ein Div mit einzeiligem/mehrzeiligem Text vertikal zu zentrieren (unbekannte Höhe/feste Höhe)
Wenn über dieses Problem gesprochen wird, fragen s...
C# implementiert MySQL-Befehlszeilensicherung und -wiederherstellung
Es gibt viele Tools zum Sichern von MySQL-Datenba...
Grafisches Tutorial zur Installation und Konfiguration von mysql 5.7.11 winx64.zip
Installieren und konfigurieren Sie das MySql-Date...
Detaillierte Erklärung zur Verwendung von Join zur Optimierung von SQL in MySQL
0. Bereiten Sie relevante Tabellen für die folgen...
Detaillierte Schritte zur Installation und Verwendung von VMware ESXi 6.5
Inhaltsverzeichnis Einführung Architektur Vorteil...
Lösen Sie das Problem, dass die mit nginx erhaltene IP-Adresse 127.0.0.1 ist
Holen Sie sich das IP-Tool importiere lombok.exte...
Website-Homepage-Design im Illustrationsstil Neuer Trend im Website-Design
Sie können sehen, dass ihre visuellen Effekte sehr...
MySQL-Beispiel für die Abfrage aller untergeordneten mehrstufigen Unterabteilungen basierend auf einer bestimmten Abteilungs-ID
Simulationstabellen und Datenskripte Kopieren Sie...
Vue implementiert Dialogkapselung
Inhaltsverzeichnis Vue2-Schreiben Schreiben der V...
Detailliertes Tutorial zum Upgrade von Zabbix Monitoring 4.4 auf 5.0
1. Zabbix-Backup [root@iZ2zeapnvuohe8p14289u6Z /]...
Docker-Installation Nginx Tutorial Implementierung Abbildung
Lassen Sie uns Nginx installieren und ausprobiere...
So verstehen Sie die semantische HTML-Struktur
Ich glaube, jeder kennt HTML und CSS, kennt die T...
Implementierungsschritte zur Installation eines FTP-Servers in Ubuntu 14.04
Inhaltsverzeichnis Installieren Softwareverwaltun...
Lassen Sie sich die tiefe Kopie von js verstehen
Inhaltsverzeichnis js tiefe Kopie Methode der Dat...