Versión básica
A juzgar por nuestra experiencia diaria en acceso en línea, el código de verificación generalmente es cuatro dígitos, compuesto por números y letras.
¡Entonces el póster llevará a todos a usar JavaScript paso a paso para crear un script de código de verificación!
Primero, dé el producto terminado, para que todos puedan entender:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <syle> #securitycode {background-color: #008000; Ancho: 70px; Altura: 30px; Font-Family: 'Kaiti', serif; tamaño de fuente: 20px; Color: blanco; } </style> <script language = "javascript" type = "text/javascript"> function 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 CodeNumber; SecurityCode = ""; // Variables globales, facilitar la verificación posterior para (var i = 0; i <4; i ++) {codeNumber = math.floor (math.random ()*36); SecurityCode+= Code [CodeNumber]; } document.getElementById ("SecurityCode"). Value = SecurityCode; } function verify () {var enterCode = document.getElementById ("Entercode"). Value; if (enterCode.ToUpperCase () == SecurityCode) {Alert ("Ingrese correcto, pasar la verificación!"); } else {enterCode.value = ""; createCode (); }} </script> <title> jizhen tan </title> </head> <body onload = "checkcookie ()"> <input type = "text" id = "enterCode"> <br/> <input type = "button" id = "SecurityCode" en ondclick = "createDode ()"> <a href = "###" onClick = "createCode ()") <input type = "button" style = "de fondo de fondo: #0099ff; font-size: 20px;" value = "verify" onClick = "verify ()"> </body> </html>1. Dado que es un código de verificación de cuatro dígitos, nuestra idea debe abrirse. Primero, necesitamos una matriz para almacenar letras y números.
Código var = nueva matriz (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. Entonces debemos dejar que muestre aleatoriamente los elementos en la matriz. Aquí creamos una variable de número de código para mostrar al azar los números, pero lo que necesitamos es un código de verificación de cuatro bits, y ahora los elementos de la matriz son todos solteros, ¿qué debemos hacer? ¡Simple! Creemos una variable de código de seguridad para almacenar elementos en la matriz. El código es el siguiente:
VAR CodeNumber; SecurityCode = ""; // Variables globales, facilitar la verificación posterior para (var i = 0; i <4; i ++) {codeNumber = math.floor (math.random ()*36); SecurityCode+= Code [CodeNumber]; }Se puede ver que en este momento la variable SecurityNumber almacena un código de verificación aleatorio de cuatro bits.
3. Bien, después de dos simples pasos, obtuvimos el código de verificación de cuatro dígitos. Lo ponemos en una función de createcode.
function 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 CodeNumber; SecurityCode = ""; // Variables globales, facilitar la verificación posterior para (var i = 0; i <4; i ++) {codeNumber = math.floor (math.random ()*36); SecurityCode+= Code [CodeNumber]; } document.getElementById ("SecurityCode"). Value = SecurityCode; }4. A continuación creamos un mecanismo de verificación:
function verify () {var enterCode = document.getElementById ("Entercode"). Value; if (enterCode.ToUpperCase () == SecurityCode) {Alert ("La entrada es correcta, pase la verificación!"); } else {enterCode.value = ""; createCode (); }}5. Bajo una pequeña modificación, código de verificación:
<syle> #SecurityCode {Background-Color: #008000; Ancho: 70px; Altura: 30px; Font-Family: 'Kaiti', serif; tamaño de fuente: 20px; Color: blanco; } </style>Avanzado: Consejos avanzados para detener más robots
En la mayoría de los proyectos con los que entré en contacto, los códigos de verificación siempre han sido realizados por el backend. En los últimos dos días, resultó haber una página que necesitaba códigos de verificación. Inmediatamente pensé en la implementación de antecedentes, pero de repente pensé que la mayoría de los proyectos no tenían altos requisitos de seguridad y requerían algunas habilidades para bloquear los robots, por lo que escribí un código de verificación utilizando la parte delantera. Y use la rotación en la propiedad de transformación de CSS3 para establecer la rotación, luego obtenga aleatoriamente algunas líneas de interferencia y, finalmente, para agregar una capa de opacidad = 0 div en la parte superior de todos los nodos DOM, saldrá un código de verificación frontal.
Código VCODE:
(function () {var randstr = function (longitud) {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: Function (n, m) {var c = m -n + 1; funciones (len) {Var _This = 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 = "relativo"; this.dom.clientHeight; "Z-Index: 9999999"] .Join (";"); _THIS.Update.call (_THIS); "#AA0000", "#FFBB00"]; "#FF7744", "#888800", "#008888"]; opciones [i];}}}}; this.dom.removechild (this.linedoms [i]); vcode.prototype.draw = function () {this.codedoms = []; document.createElement ("span"); * índice, this.uw * índice + this.uw-10) + "px", "top:" + randint (0, this.h-30) + "px", "transform: rotate (" + randint (-30, 30) + "deg)", "-ms-transform: rotate (" + randint (-30, 30) + "deg)", -moz-transform: Rotate (Rotate (" + 30, 30, 30, 30, 30, 30, 30, 30,-30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30. "deg)", "-webkit-transform: rotate (" + randint (-30, 30) + "deg)", "-o-transform: rotate (" + randint (-30, 30) + "deg)", "font-family:" + this.options.fonts [randint (0, this.options.fonts.length-1)), "font-wet. 900)] .Join (";"); "Posición: Absolute", "Opacidad:" + Randint (3, 8) / 10, "Ancho:" + randint (this.options.lineWidthmin, this.options.linewidthmax) + "Px", "altura:" + randint (this.options.lineheightmin, this.options.lineHeightMax) + "Px" 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-Family:" + this. this.options.fonts.length - 1)], "Font -Weight:" + Randint (400, 900).uso:
// El contenedor es el nodo DOM del código de verificación var código = new Vcode (contenedor); // Verifique si es correcto // InputCode es el código de verificación ingresado por user.verify (inputCode); // Devolver verdadero o falso