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
Allgemeine DIV-Aufgaben (Teil 1) – Allgemeine Aufgaben (Bildlaufleisten anzeigen/Divs ausblenden/Ereignis-Bubbling deaktivieren usw.)
Als am häufigsten verwendetes Layoutelement spielt...
Informationen zu WSL-Konfigurations- und Änderungsproblemen in Docker
https://docs.microsoft.com/en-us/windows/wsl/wsl-...
Beispiele für die Verwendung von HTML-Marquee-Tags
Dieses Tag ist nicht Teil von HTML3.2 und unterstü...
Zusammenfassung mehrerer APIs oder Tipps in HTML5, die Sie nicht verpassen sollten
In früheren Blogbeiträgen habe ich mich auf einige...
So stellen Sie per SSH eine Verbindung zum Docker-Server her
Als ich zum ersten Mal mit Docker in Berührung ka...
Verwenden Sie das Label-Tag, um das Optionsfeld auszuwählen, indem Sie auf den Text klicken
Das <label>-Tag definiert eine Bezeichnung (...
Detaillierte Erklärung der Slots in Vue
Die Wiederverwendung von Code in Vue liefert uns ...
Implementierungsidee zur Linksausrichtung der letzten Zeile des Flexbox-Layouts
Wenn es sich bei der Verwendung des Flex-Layouts ...
Optimierung der Leistung von Paging-Abfragen für MySQL mit mehreren zehn Millionen Daten
Wenn die Datenmenge in MySQL groß ist, wird die S...
Tutorial zu HTML-Tabellen-Tags (21): Zeilenrahmen-Farbattribut BORDERCOLOR
Um die Tabelle zu verschönern, können Sie für die...
Techniken zur Wiederverwendung von HTML
HTML-Wiederverwendung ist ein Begriff, der selten ...
So stellen Sie das Crownblog-Projekt mit Docker in der Alibaba Cloud bereit
Front-End-Projektpaketierung Suchen Sie .env.prod...
Lösung für das Problem mit sicheren Dateiprivilegien beim Exportieren von MySQL-Daten
FEHLER 1290 (HY000) : Der MySQL-Server wird mit d...
Schreiben Sie ein React-ähnliches Framework von Grund auf
Kürzlich habe ich im Internet den Artikel „Build ...
Führen Sie die Schritte zur Installation von MySQL 8.0.x unter Linux aus.
MySQL Einführung in MySQL MySQL war ursprünglich ...