Grundversion
Nach unserer täglichen Erfahrung im Online -Zugriff besteht der Bestätigungscode im Allgemeinen vier Ziffern, die Zahlen und Briefe zusammensetzen.
Dann führt das Poster dazu, dass jeder Schritt für Schritt JavaScript verwendet, um ein Verifizierungscodeskript zu erstellen!
Geben Sie zuerst das fertige Produkt, damit jeder verstehen kann:
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <style> #securityCode {Hintergrund-Color: #008000; Breite: 70px; Höhe: 30px; Schriftfamilie: 'Kaiti', Serif; Schriftgröße: 20px; Farbe: weiß; } </style> <script Language = "javaScript" type = "text/javaScript"> Funktion createCode () {var code = new Array (0,1,2,3,4,5,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'); var codendumber; SecurityCode = ""; // Globale Variablen erleichtern die nachfolgende Überprüfung für (var i = 0; i <4; i ++) {codenumber = math.floor (math.random ()*36); SecurityCode+= Code [CODENUMBER]; } document.getElementById ("SecurityCode"). Value = SecurityCode; } Funktion verifizieren () {var Entercode = document.getElementById ("Entercode"). Wert; if (Entercode.touppercase () == SecurityCode) {alert ("korrekt eingeben, Überprüfung passieren!"); } else {Entercode.Value = ""; CreateCode (); } } </script> <title>Jizhen Tan</title></head><body onLoad="checkCookie()" > <input type="text" id="enterCode"><br/> <input type="button" id="securityCode" onclick="createCode()"> <a href="###" onclick="createCode()"> Can't see clearly</a><br/> <input type = "button" style = "background-color: #0099ff; Schriftgröße: 20px;" value = "verifizieren" onclick = "verify ()"> </body> </html>1. Da es sich um einen vierstelligen Überprüfungscode handelt, muss unsere Idee geöffnet werden. Erstens brauchen wir ein Array, um Buchstaben und Zahlen zu speichern.
var code = neuarray (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');
2. Dann müssen wir die Elemente im Array zufällig anzeigen lassen. Hier erstellen wir eine Variable der CodeNumber, um die Zahlen zufällig anzuzeigen. Wir brauchen jedoch einen Vier-Bit-Verifizierungscode, und jetzt sind die Elemente im Array alle Single. Was sollen wir tun? Einfach! Lassen Sie uns eine SecurityCode -Variable erstellen, um Elemente im Array zu speichern. Der Code ist wie folgt:
var codendumber; SecurityCode = ""; // Globale Variablen erleichtern die nachfolgende Überprüfung für (var i = 0; i <4; i ++) {codenumber = math.floor (math.random ()*36); SecurityCode+= Code [CODENUMBER]; }Es ist ersichtlich, dass die SecurityNumber-Variable zu diesem Zeitpunkt einen Vier-Bit-Zufallsverifizierungscode speichert.
3. Okay, nach zwei einfachen Schritten haben wir den vierstelligen Bestätigungscode erhalten. Wir setzen es in eine CreateCode -Funktion.
Funktion createCode () {var code = 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'); var codendumber; SecurityCode = ""; // Globale Variablen erleichtern die nachfolgende Überprüfung für (var i = 0; i <4; i ++) {codenumber = math.floor (math.random ()*36); SecurityCode+= Code [CODENUMBER]; } document.getElementById ("SecurityCode"). Value = SecurityCode; }4. Als nächstes erstellen wir einen Überprüfungsmechanismus:
Funktion verifizieren () {var Entercode = document.getElementById ("Entercode"). Wert; if (Entercode.touppercase () == SecurityCode) {alert ("Eingabe ist korrekt, Überprüfung bestehen!"); } else {Entercode.Value = ""; CreateCode (); }}5. Unter einer kleinen Änderung, Verifizierungscode:
<Styles> #securityCode {Hintergrundfarbe: #008000; Breite: 70px; Höhe: 30px; Schriftfamilie: 'Kaiti', Serif; Schriftgröße: 20px; Farbe: weiß; } </style>Fortgeschrittene: Fortgeschrittene Tipps, um Roboter weiter zu stoppen
In den meisten Projekten, mit denen ich in Kontakt gekommen bin, wurden die Verifizierungscodes immer vom Backend durchgeführt. In den letzten zwei Tagen gab es zufällig eine Seite, die Überprüfungscodes benötigte. Ich dachte sofort über die Hintergrundimplementierung nach, aber plötzlich dachte ich, dass die meisten Projekte keine hohen Sicherheitsanforderungen hatten und einige Fähigkeiten benötigten, um Roboter zu blockieren. Deshalb schrieb ich einen Verifizierungscode mit dem Frontend. Und verwenden Sie die Rotation in der Transformation Eigenschaft von CSS3, um die Rotation einzustellen, und erhalten Sie dann zufällig einige Interferenzleitungen, und schließlich wird ein Front-End-Verifizierungscode herausgegeben, um eine Schicht Opazität = 0 Div auf allen Dom-Knoten hinzuzufügen.
Vcode -Code:
(function () {var randstr = function (Länge) {var key = {str: [ 'a', 'b', 'c', 'd', 'e', 'f', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'O', 'P', 'Q', 'R', 'S' '' '' '' S ',' t ',' x ',' u ',' V ',' Y ',' Z ',' W ',' n ',' 0 ',' 1 ',' 2 ',' 3 ',' 4 ',' 5 ',' 6 ',' 7 ',' 8 ',' 9 ' ], randint: m) {var c = m -n + 1; function(len){ var _this = this; var l = len || 10; var str = ''; for(var i = 0 ; i<l ; i++){ str += _this.randStr(); } return str; } }; length = length ? length : 10; return key.create(length); }; var randint = function(n,m){ var c = m-n+1; var num = Math.random() * c + n; return Math.floor(num); }; var vCode = function(dom, options){ this.codeDoms = []; this.lineDoms = []; this.initOptions(options); this.dom = dom; this.init(); this.addEvent(); this.update(); this.mask(); }; vCode.prototype.init = function () {this.dom.Style.position = "relativ"; this.dom.clientHeight; "Z-Index: 999999"] .Join (";"); _This.Update.call (_This); "#Aa0000", "#ffbb00"]; "#Ff7744", "#8888", "#00888"]; Optionen [i];}}}}; that vcode.prototype.draw = function () {this.codedoms = []; document.createelement ("span"); Randint (this.uw * Index, this.uw * Index + this.uw-10) + "px", "Top:" + randint (0, this.h-30) + "px", "Transformation: rotate (" + randint (-30, 30) + "Deg)," -ms-transform: rotate (rotate (rot. (-30), 30) + ",", " +", "," + "", ",", ",", ",", "," "," + "", ",", ",", ",", " +", "", "", "", "" + "", "", ",", " +", ",", ",", ",", " +" "" "," "", "", " +" "", "", "", " +" "", "", "", "", "", " +" ,af Randint (-30, 30) + "Deg)", "-webkit-transform: rotate (" + randint (-30, 30) + "Deg)", "-o-transform: rotate (" + randint (-30, 30) + "Deg)", "Schriftfamilie:" + This.Options.Options.Fonts [Randint (0, 0, 0, This.options.Options.Options.Options.Options.Options.Options.Options.Options.Options.Options.Options.Options.Options.Options.Options.Options.Options.Options.Options.Options.Options.Options.Options.Options ", Fonts. Randint (400, 900). Dom.Style.csSTEXT = ["Position: Absolute", "Opazität:" + Randint (3, 8) / 10, "Breite:" + randint (this.options.linewidhmin, this.options.linewidthmax) + "px", "Höhe:" + randint (this.options.options.lineHeightMin "," wobin ",": this.options.lineColors[randint(0, this.options.lineColors.length - 1)], "left:" + randint(0, this.w - 20) + "px", "top:" + randint(0, this.h) + "px", "transform:rotate(" + randint(-30, 30) + "deg)", "-ms-transform:rotate(" + randint(-30, 30) + "Deg)", "-moz-transform: rotate (" + randint (-30, 30) + "deg)", "-webkit-transform: rotate (" + randint (-30, 30) + "deg)", "-O-transform: rotate (" + randint (-30, 30) + "Deg)", "FONT-FAMMY:" + This.Ponts [, "," FONT-FAMMY: " + This.Pontions [ this.options.fontsVerwendung:
// Container ist der DOM -Knoten des Verifizierungscode var code = new vCode (container); // Überprüfen Sie, ob es korrekt ist // inputcode ist der vom Benutzer eingegebene Überprüfungscode. // RECHT WAHR oder FALSCH zurück