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
Installieren Sie das Linux-System automatisch basierend auf Cobbler
1. Komponenten installieren yum install epel-rpm-...
Einführung in die Installation und Konfiguration von JDK unter CentOS-Systemen
Inhaltsverzeichnis Vorwort Überprüfen und deinsta...
Zusammenfassung relevanter Erkenntnisse zur Umsetzung adaptiven Webdesigns
Wie funktioniert „Adaptives Webdesign“? Eigentlich...
MYSQL8.0.13 kostenlose Installationsversion Konfiguration Tutorial Beispiel detaillierte Erklärung
1. Download, ich nehme 8.0 als Beispiel Download-...
Detaillierte Erklärung der Meta-Tags (die Rolle der Meta-Tags)
Egal wie großartig Ihre persönliche Website ist, ...
Layui implementiert Beispielcode für Abfragen mit mehreren Bedingungen
Ich habe vor kurzem ein Dateisystem erstellt und ...
Der Unterschied zwischen dem herkömmlichen Tomcat-Startdienst und dem in Springboot integrierten Tomcat-Startdienst (empfohlen)
Spring-Integration mit SpringMVC Die web.xml-Konf...
Vue 2.0 Grundlagen im Detail
Inhaltsverzeichnis 1. Funktionen 2. Beispiele 3. ...
Java verwendet Apache.POI, um HSSFWorkbook nach Excel zu exportieren
Verwenden Sie HSSFWorkbook in Apache.POI, um nach...
So ändern Sie den Punkt im WeChat-Applet Swiper-Dot in einen Slider
Inhaltsverzeichnis Hintergrund Zieleffekt Ideen e...
Docker stellt nginx bereit und mountet Ordner und Dateioperationen
Während dieser Zeit habe ich Docker studiert und ...
Implementierung der MySQL-Datentypkonvertierung
1. Problem Es gibt eine Tabelle wie unten gezeigt...
Zusammenfassung einiger kleinerer Probleme mit der MySQL-Autoinkrement-ID
Die folgenden Fragen basieren alle auf der InnoDB...
Die heißesten Trends im Webdesign UI im Jahr 2013 Die beliebtesten UI-Designs
Die Zeit vergeht wie im Flug und in nur sechs Tag...
Vollständige Schritte zum Mounten einer neuen Datenfestplatte in CentOS7
Vorwort Ich habe gerade einen neuen VPS gekauft. ...