JavaScript realisiert die Generierung und Überprüfung von Zufallscodes
|
Die Generierung und Überprüfung von Zufallscodes in JavaScript dient Ihnen als Referenz. Die spezifischen Inhalte sind wie folgt Da es zwei Möglichkeiten gibt, an die Ereignisquelle zu gelangen, sind beide hier angehängt: Dies wird direkt definiert mit var
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Zufällige Überprüfung mit Prüfcode</title>
<style type="text/css">
#Code{
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: #ddd;
Polsterung: 10px;
Zeilenhöhe: 100px;
Textausrichtung: zentriert;
Schriftgröße: 20px;
Farbe: rot;
/*Schriftstärke: fett;*/
}
</Stil>
</Kopf>
<Text>
<div id="Code"></div>
<input type="text" name="" id="neuerCode">
<input type="button" name="" id="validieren" value="Validieren">
<Skripttyp="text/javascript">
fenster.onload = Funktion (){
Variablencode;
// 1. Holen Sie sich das entsprechende Tag var codeDiv = document.getElementById("code");
var newCodeInput = document.getElementById("newCode");
var validieren = document.getElementById("validieren");
// Seite laden um den entsprechenden Verifizierungscode zu erhalten creatCode()
// 1. Holen Sie sich eine Ganzzahl zwischen min und max, 1~100
Funktion Zufallszahl(max,min){
gibt Math.floor(Math.random()*(max-min)+min) zurück;
}
Funktion Code erstellen(){
Code = "";
// Länge festlegen var codeLenth = 4;
var randomCode = [0,1,2,3,4,5,6,7,8,9,"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
für(var i=0;i<codeLenth;i++){
//Setze den Zufallsbereich auf 36 range var index = random(0,36);
Code += Zufallscode[Index];
}
codeDiv.innerHTML = Code;
}
// Validierungsschaltfläche Validierung validate.onclick = function (){
// Den vom Benutzer eingegebenen Bestätigungscode abrufen var newCode = newCodeInput.value.toUpperCase();
wenn (neuerCode === Code){
//Überprüfen Sie, ob die entsprechende URL erfolgreich aufgerufen wurde window.location.href = "http://www.baidu.com";
}anders {
//Alarm „Verifizierung fehlgeschlagen“ („Verifizierung fehlgeschlagen, bitte erneut eingeben“)
// Eingabefeld leeren newCodeInput.value = "";
// Den Bestätigungscode erneut abrufen creatCode();
}
}
}
</Skript>
</body>
</html>So definieren Sie Variablen mithilfe einer Funktion:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Zufällige Überprüfung mit Prüfcode</title>
<style type="text/css">
#Code{
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: #ddd;
Polsterung: 10px;
Zeilenhöhe: 100px;
Textausrichtung: zentriert;
Schriftgröße: 20px;
Farbe: rot;
/*Schriftstärke: fett;*/
}
</Stil>
</Kopf>
<Text>
<div id="Code"></div>
<input type="text" name="" id="neuerCode">
<input type="button" name="" id="validieren" value="Validieren">
<Skripttyp="text/javascript">
fenster.onload = Funktion (){
Variablencode;
// 1. Holen Sie sich das entsprechende Tag (holen Sie sich die Ereignisquelle)
Funktion $(id){
Rückgabetyp der ID === "Zeichenfolge"?document.getElementById(id):null;
}
// Seite laden um den entsprechenden Verifizierungscode zu erhalten creatCode()
// 1. Holen Sie sich eine Ganzzahl zwischen min und max, 1~100
Funktion Zufallszahl(max,min){
gibt Math.floor(Math.random()*(max-min)+min) zurück;
}
Funktion Code erstellen(){
Code = "";
// Länge festlegen var codeLenth = 4;
var randomCode = [0,1,2,3,4,5,6,7,8,9,"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
für(var i=0;i<codeLenth;i++){
//Setze den Zufallsbereich auf 36 range var index = random(0,36);
Code += Zufallscode[Index];
}
$("code").innerHTML = code;
}
// Überprüfung der Validierungsschaltfläche $("validate").onclick = function () {
// Den vom Benutzer eingegebenen Bestätigungscode abrufen var newCode = $("newCode").value.toUpperCase();
wenn (neuerCode === Code){
//Überprüfen Sie, ob die entsprechende URL erfolgreich aufgerufen wurde window.location.href = "http://www.baidu.com";
}anders {
//Alarm „Verifizierung fehlgeschlagen“ („Verifizierung fehlgeschlagen, bitte erneut eingeben“)
// Eingabefeld leeren$("newCode").value = "";
// Den Bestätigungscode erneut abrufen creatCode();
}
}
}
</Skript>
</body>
</html>Beide Methoden erzielen den gleichen Effekt. Anbei das Effektbild:
Wenn Sie zur Überprüfung falsche Daten eingeben, werden Sie aufgefordert:
Wenn Sie die korrekten Daten zur Überprüfung eingegeben haben, klicken Sie auf Überprüfen. Wenn die Überprüfung erfolgreich ist, werden Sie zum angegebenen Pfad weitergeleitet. 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:
|
<<: Detaillierte Erläuterung der Verwendung von MySQL Explain (Analyseindex)
Artikel empfehlen
So verteilen Sie mit CSS zwei Schaltflächen auf der linken und rechten Seite desselben übergeordneten Tags
In diesem Artikel wird hauptsächlich die Methode ...
Referenzieren Sie SVG-Bilder in CSS, um den Implementierungscode für dynamische Farbumschaltung zu unterstützen
Wenn wir ein SVG-Bild zur Anzeige hinzufügen, erh...
Implementierung von MySQL Select in der Unterabfrageoptimierung
Die folgende Demonstration basiert auf MySQL Vers...
CSS3-Übergangsrotationsperspektive, 2D3D-Animation und andere Effektbeispielcodes
Inhaltsverzeichnis CSS3-Boxmodell a. CSS3-Filter ...
MySQL 5.6-Binärinstallationsprozess unter Linux
1.1 Download des binären Installationspakets wget...
Zusammenfassung der genauen Berechnungen verschiedener Abstände/Scrolldistanzen in einem Fenster
Normalerweise müssen wir uns bei der Projektentwic...
Die häufigsten Fehler beim Schreiben von HTML-Tags
Wir sollten besser aufpassen, denn die HTML-Poliz...
Analyse des HTTP-Schnittstellentestprozesses basierend auf Postman
Ich habe zufällig ein tolles Tutorial zum Thema k...
Website User Experience Design (UE)
Ich habe gerade einen von JunChen verfassten Beitr...
So installieren Sie den Vim-Editor unter Linux (Ubuntu 18.04)
Sie können das Desktopsystem von der offiziellen ...
Design-Sharing der Download-Seite des Pengyou.com-Mobilclients (Bild und Text)
Schauen wir uns zunächst einige einfache Daten an:...
HTML-Tabellen-Tag-Tutorial (45): Tabellen-Body-Tag
Mit dem Tag <tbody> wird der Stil des Tabel...
CSS-Code-Abkürzung div+css-Layout-Code-Abkürzungsspezifikation
Durch die Verwendung von Abkürzungen können Sie di...
Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung
Inhaltsverzeichnis Vorwort 1. Übersicht 2. Lese- ...
Eine kurze Diskussion über die Anwendung von HTML-Webseiten-Tabellenstruktur-Markup
Bevor wir über die strukturelle Auszeichnung von ...