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