js zur Implementierung einer Überprüfungscode-Interferenz (dynamisch)

js zur Implementierung einer Überprüfungscode-Interferenz (dynamisch)

In diesem Artikelbeispiel wird der spezifische Code von js zur Implementierung der dynamischen Interferenz des Verifizierungscodes zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Effekt 1

Effekt 2

Code 1

<!doctype html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Einfache Verwendung des JS-Verifizierungscodes</title>
<Stil>
 .Code
 {
 Schriftfamilie: Arial;
 Schriftstil: kursiv;
 Farbe: blau;
 Schriftgröße: 30px;
 Rand: 0;
 Polsterung: 2px 3px;
 Buchstabenabstand: 3px;
 Schriftstärke: fett; 
 schweben: links; 
 Cursor:Zeiger;
 Breite: 150px;
 Höhe: 50px;
 Zeilenhöhe: 60px;
 Textausrichtung: zentriert;
 vertikale Ausrichtung: Mitte;
 Hintergrundfarbe: #D8B7E3;
 }
 Spanne {
 Textdekoration: keine;
 Schriftgröße: 12px;
 Farbe: #288bc4;
 Polsterung links: 10px;
 }

 Spanne:Hover {
 Textdekoration: Unterstreichen;
 Cursor:Zeiger;
 }
</Stil>

<Skript>
 //Erstelle einen zufälligen Bestätigungscode, wenn die Seite geladen wird window.onload=function(){
 Code erstellen(4); 
 }

 //Methode zum Generieren eines Bestätigungscodes function createCode(length) {
 var code = "";
 var codeLength = parseInt(length); //Länge des Verifizierungscodes var checkCode = document.getElementById("checkCode");
 Alle Kandidatenzeichen für den Bestätigungscode können natürlich auch in chinesischer Sprache verwendet werden var codeChars = new Array(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',
 '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'); 
 //Durchlaufe die Zeichenfolgen, die den Bestätigungscode für (var i = 0; i < codeLength; i++) bilden.
 {
 //Den zufälligen Verifizierungscode abrufen index var charNum = Math.floor(Math.random() * 62);
 //Kombiniert zum angegebenen Zeichenprüfcode code += codeChars[charNum];
 }
 wenn (Prüfcode)
 {
 //Fügen Sie dem Überprüfungscodebereich einen Stilnamen hinzu checkCode.className = "code";
 //Den generierten Verifizierungscode dem Anzeigebereich zuweisen checkCode.innerHTML = code;
 }
 }
 
 //Überprüfen Sie, ob der Bestätigungscode korrekt ist. Funktion validateCode()
 {
 //Den im Anzeigebereich generierten Bestätigungscode abrufen var checkCode = document.getElementById("checkCode").innerHTML;
 //Den Eingabeüberprüfungscode abrufen var inputCode = document.getElementById("inputCode").value;
 Konsole.log(Code prüfen);
 console.log(Eingabecode);
 wenn (Eingabecode.Länge <= 0)
 {
 alert("Bitte geben Sie den Bestätigungscode ein!");
 }
 sonst wenn (inputCode.toUpperCase() != checkCode.toUpperCase())
 {
 alert("Der Bestätigungscode wurde falsch eingegeben!");
 Code erstellen(4);
 }
 anders
 {
 alert("Der Bestätigungscode ist korrekt!");
 } 
 } 
</Skript>
</Kopf>
<Text>
 <table border="0" cellspacing="5" cellpadding="5" >
 <tr>
 <td> <div id="Code prüfen" class="code" onclick="Code erstellen(4)" ></div></td>
 <td> <span onclick="createCode(4)">Wenn es nicht klar ist, ändern Sie ein anderes</span></td>
 </tr>
 <tr>
 <td>Bestätigungscode:</td>
 <td><Eingabetyp="Text" id="Eingabecode" Stil="float:left;" /></td>
 </tr>
 <tr>
 <td></td>
 <td><Eingabetyp="Schaltfläche" beim Klicken="Code validieren()" Wert="OK" /></td>
 </tr>
 </Tabelle>
 </div>
</body>
</html>

Code 2

<!DOCTYPE html>

<html>
<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <meta http-equiv="X-UA-kompatibel" content="ie=edge">
 <title>Canvas-Verifizierungscode</title>
</Kopf>
<Text>
 <canvas width="200" height="60" id="check" style="border:1px solid #000;">Ihr Browser unterstützt den Canvas-Tag nicht! </Leinwand>
 <Skript>
 var ctx = document.getElementById("check").getContext("2d");
 var ctxW = document.getElementById("check").clientWidth;
 var ctxH = document.getElementById("check").clientHeight;
 /**
 * Erzeuge eine Zufallszahl und lege den Zufallszahlenbereich fest* @param {[Zahl]} min [Untergrenze des Zufallszahlenbereichs]
 * @param {[Zahl]} max [Obergrenze des Zufallszahlenintervalls]
 * @return {[Zahl]} [Gibt eine Zufallszahl in diesem Bereich zurück]
 */

 Funktion ranNum(min, max) {
 gibt Math.random() * (max - min) + min zurück;
 }
 /**
 * Gibt eine zufällige Farbe zurück und kann den Farbbereich festlegen * @param {[Zahl]} min [Untergrenze der Farbe]
 * @param {[Zahl]} max [Obergrenze der Farbe]
 * @return {[String]} [Zufällige Farbe]
 */

 Funktion ranColor(min, max) {
 var r = ranNum(min, max);
 var g = ranNum(min, max);
 var b = ranNum(min, max);
 // gibt "rgb(" + r + "," + g + "," + b + ")" zurück;
 gibt `rgb(${r},${g},${b})` zurück;
 }
 /**
 * Zufälliges String-Array * @return {[Array]} [Zufälliges Array]
 */
 Funktion ranStr() {
 var str = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789";
 return str.split("").sort(function () {
 return Math.random() - 0,5
 });
 }

 /**
 * Textzeichenfolge zeichnen * @param {[String]} canvasId [Canvas-ID]
 * @param {[Zahl]} canvasW [Breite der Leinwand]
 * @param {[Zahl]} canvasH [Höhe der Leinwand]
 * @param {[Zahl]} num [Anzahl der Zeichen zum Zeichnen des Bestätigungscodes]
 * @param {[Zahl]} fsMin [Untergrenze der Schriftgröße]
 * @param {[Zahl]} fsMax [Obergrenze der Schriftgröße]
 * @param {[Zahl]} frMin [Untergrenze für Schriftrotationsoffset]
 * @param {[Zahl]} frMax [Obergrenze des Schriftrotationsoffsets]
 * @param {[Zahl]} min [Farbuntergrenze]
 * @param {[Zahl]} max [Obergrenze der Farbe]
 * @return {[String]} [Zufälliger String]
 */

 Funktion zeichneText(Leinwand-ID, Leinwand-W, Leinwand-H, Num, fsMin, fsMax, frMin, frMax, min, max) {
 var str = "";
 für (var i = 0; i < num; i++) {
 var char = ranStr()[Math.floor(0, ranStr().length)];
 var fs = ranNum(fsMin, fsMax);
 canvasId.font = fs + "px Verdana";
 canvasId.fillStyle = ranColor(min, max);
 // Zeichenstatus speichern canvasId.save();
 // Kontext.Übersetzen(x,y);
 // x addiert den Wert zur horizontalen Koordinate (x) // y addiert den Wert zur vertikalen Koordinate (y) // Offset canvasId.translate(canvasW / num * i + canvasW / 20, 0);
 // Winkel transformieren canvasId.rotate(ranNum(frMin, frMax) * Math.PI / 180);
 // Kontext.Fülltext(Text,x,y,max.Breite);
 // Text gibt den Text an, der auf der Leinwand ausgegeben werden soll.
 // x Die x-Koordinatenposition (relativ zur Leinwand), an der mit dem Zeichnen des Textes begonnen werden soll.
 // y Die y-Koordinatenposition (relativ zur Leinwand), an der mit dem Zeichnen des Textes begonnen werden soll.
 //maxWidth ist optional. Die maximal zulässige Textbreite in Pixeln.
 canvasId.fillText(char, 0, (canvasH + fs) / 2,5, canvasW / num);
 //Gibt den zuvor gespeicherten Pfadstatus und die Attribute zurück ctx.restore();
 str += Zeichen;
 }

 // konsole.log(str);
 gibt str zurück;
 }
 
 /**
 * Zeichne den Hintergrund * @param {[String]} canvasId [Canvas-ID]
 * @param {[Zahl]} canvasW [Breite der Leinwand]
 * @param {[Zahl]} canvasH [Höhe der Leinwand]
 * @param {[Zahl]} min [Untergrenze]
 * @param {[Zahl]} max [Obergrenze]
 */

 Funktion drawBg(Leinwand-ID, Leinwand-B, Leinwand-H, min, max) {
 // Leinwandhintergrund zeichnen canvasId.fillStyle = ranColor(min, max);
 // Füllfarbe canvasId.fillRect(0, 0, canvasW, canvasH);
 }

 /**
 * Interferenzpunkte zeichnen* @param {[String]} canvasId [Canvas-ID]
 * @param {[Zahl]} canvasW [Breite der Leinwand]
 * @param {[Zahl]} canvasH [Höhe der Leinwand]
 * @param {[Nummer]} Nummer [Anzahl der Ziehungen]
 * @param {[Zahl]} r [Punktradius]
 * @param {[Zahl]} min [Untergrenze]
 * @param {[Zahl]} max [online]
 */

 Funktion zeichneKreis(Leinwand-ID, Leinwand-B, Leinwand-H, Num, r, min, max) {
 für (var i = 0; i < num; i++) {
 // Beginnen Sie zu zeichnen (nehmen Sie den Stift)
 canvasId.beginPath();
 // context.arc(x,y,r,sWinkel,eWinkel,gegen den Uhrzeigersinn); (Zeichnung)
 // x Die x-Koordinate des Kreismittelpunkts.
 // y Die y-Koordinate des Kreismittelpunkts.
 // r Der Radius des Kreises.
 // sAngle Startwinkel im Bogenmaß. (Die Drei-Uhr-Position des Bogenkreises beträgt 0 Grad).
 // eAngle Endwinkel im Bogenmaß.
 // gegen den Uhrzeigersinn optional. Gibt an, ob gegen den Uhrzeigersinn oder im Uhrzeigersinn gezeichnet werden soll. Falsch = im Uhrzeigersinn, Wahr = gegen den Uhrzeigersinn.
 LeinwandId.arc(ranNum(0, LeinwandW), ranNum(0, LeinwandH), r, 0, 2 * Math.PI);

 
 // Füllfarbe canvasId.fillStyle = ranColor(min, max);

 //Füllen Sie canvasId.fill();

 // Zeichnung schließen (Stift loslassen)
 canvasId.closePath();
 }
 }

 /**
 * Interferenzliniensegmente zeichnen * @param {[String]} canvasId [Canvas-ID]
 * @param {[Zahl]} canvasW [Breite der Leinwand]
 * @param {[Zahl]} canvasH [Höhe der Leinwand]
 * @param {[Nummer]} Nummer [Anzahl der Ziehungen]
 * @param {[Zahl]} min [Untergrenze]
 * @param {[Zahl]} max [online]
 */

 Funktion drawLine(canvasId, canvasW, canvasH, num, min, max) {
 für (var i = 0; i < num; i++) {
 // Beginnen Sie zu zeichnen (nehmen Sie den Stift)
 canvasId.beginPath();
 //Startpunkt zeichnen canvasId.moveTo(ranNum(0, canvasW), ranNum(0, canvasH));
 // Endpunkt zeichnen canvasId.lineTo(ranNum(0, canvasW), ranNum(0, canvasH));
 canvasId.strokeStyle = ranColor(min, max);
 canvasId.stroke();
 canvasId.closePath();
 }
 }
 // Zeichne den Bestätigungscode Funktion drawCanvas() {
 // Leinwand leeren
 ctx.clearRect(0, 0, 200, 60);
 // Den Hintergrund zeichnen drawBg(ctx, ctxW, ctxH, 200, 255);
 // Interferenzkreis zeichnen drawCircle(ctx, ctxW, ctxH, 20, 5, 200, 255);
 // Interferenzliniensegment zeichnen drawLine(ctx, ctxW, ctxH, 20, 0, 255);
 // Zeichne den Bestätigungscode var str = drawText(ctx, ctxW, ctxH, 4, 10, 50, -30, 30, 0, 100);
 gibt str zurück;
 }
 zeichneCanvas();
 document.getElementById('check').onclick = drawCanvas;
 </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:
  • js zur Implementierung einer Interferenz mit Verifizierungscodes (statisch)
  • Beispiel eines JavaScript-Skripts zum Schreiben eines Verifizierungscodes mit Rotation + Linieninterferenz

<<:  Beispiel für die Integration von Kafka mit Nginx

>>:  Detaillierte Diskussion zum Thema mysqldump-Datenexport

Artikel empfehlen

Beispiel zum Referenzieren von Umgebungsvariablen in Docker Compose

In einem Projekt müssen Sie häufig Umgebungsvaria...

MySQL-Sortierung nach konventioneller Sortierung, benutzerdefinierter Sortierung und Sortierung nach chinesischen Pinyin-Buchstaben

Normale MySQL-Sortierung, benutzerdefinierte Sort...

HTML-Tabellen-Tag-Tutorial (19): Zeilen-Tag

Die Attribute des <TR>-Tags werden verwende...

Detaillierte Erläuterung des Quellcodes der vue.$set()-Methode von Vue

Bei der Verwendung von Vue zum Entwickeln von Pro...

Detaillierte Erläuterung der Implementierungsmethode für die Datenbank-Mehrtabellenverbindungsabfrage

Detaillierte Erläuterung der Implementierungsmeth...

Was macht die MySQL-Datenbank?

MySQL ist ein relationales Datenbankverwaltungssy...

Detaillierte Erläuterung der Idee der xshell-Remote-Anmeldung bei CentOS7 ohne Kennwortanmeldung

Lassen Sie mich zunächst über die allgemeine Idee...

React implementiert ein allgemeines Beispiel für eine Skelett-Bildschirmkomponente

Inhaltsverzeichnis Was ist ein Skelettsieb? Demo ...

Eine kurze Diskussion über allgemeine Operationen von MySQL in cmd und Python

Umgebungskonfiguration 1: Installieren Sie MySQL ...

Installation und Verwendung der MySQL MyCat-Middleware

1. Was ist mycat Ein vollständig Open Source-Groß...

Schritte für Docker zum Erstellen eines eigenen lokalen Image-Repositorys

1. Umgebung und Vorbereitung 1. Ubuntu 14.04 2.Do...

Überlegungen zur Partitionierung von MySQL-Datenbanktabellen [empfohlen]

Die Tabellenpartitionierung unterscheidet sich vo...

Über das Problem der Offline-Installation des Docker-Pakets unter CentOS 8.4

Die verwendete virtuelle Maschine ist CentOS 8.4,...

Zusammenfassung der Methoden zur Änderung von MySQL-Passwörtern

Methoden zum Ändern von Passwörtern vor MySQL 5.7...

Fehlerbehebung bei MySQL-Datenverlust

Inhaltsverzeichnis Vorwort Untersuchung vor Ort G...