Versão básica
A julgar pela nossa experiência diária em acesso on -line, o código de verificação geralmente é de quatro dígitos, composto por números e cartas.
Em seguida, o pôster levará todos a usar o JavaScript passo a passo para criar um script de código de verificação!
Primeiro dê o produto acabado, para que todos possam entender:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <estilo> #SecurityCode {Background-Color: #008000; Largura: 70px; Altura: 30px; Fonte-família: 'Kaiti', serif; Size da fonte: 20px; Cor: Branco; } </style> <script linguagem = "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', '' ',', '', ',' v '; var codenumber; SecurityCode = ""; // Variáveis globais, facilita a verificação subsequente 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 ("Entrada correta, Passe a verificação!"); } else {entercode.value = ""; createCode (); }} </script> <title> jizhen tan </title> </ad head> <corpo onload = "checkCookie ()"> <input type = "text" id = "entercode"> <br/> <input type = "botão" ID = "SecurityCode" onclick = "CreateCode" "> <a href ="#" Claramente </a> <br/> <input type = "button" style = "background-color: #0099ff; font-size: 20px;" value = "verify" onclick = "verify ()"> </body> </html>1. Como é um código de verificação de quatro dígitos, nossa ideia precisa ser aberta. Primeiro, precisamos de uma matriz para armazenar letras e números.
var código = nova 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', '' ',', '', ',' v ';
2. Então, precisamos deixá -lo exibir aleatoriamente os elementos na matriz. Aqui, criamos uma variável de codenumber para exibir aleatoriamente os números, mas o que precisamos é de um código de verificação de quatro bits e agora os elementos da matriz são todos solteiros, o que devemos fazer? Simples! Vamos criar uma variável de código de segurança para armazenar elementos na matriz. O código é o seguinte:
var codenumber; SecurityCode = ""; // Variáveis globais, facilita a verificação subsequente para (var i = 0; i <4; i ++) {codenumber = math.floor (math.random ()*36); SecurityCode+= Code [codenumber]; }Pode-se observar que, neste momento, a variável SecurityNumber armazena um código de verificação aleatório de quatro bits.
3. Ok, após duas etapas simples, recebemos o código de verificação de quatro dígitos. Nós o colocamos em uma função CreateCode.
function createCode () {var code = nova 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', '' ',', '', ',' v '; var codenumber; SecurityCode = ""; // Variáveis globais, facilita a verificação subsequente para (var i = 0; i <4; i ++) {codenumber = math.floor (math.random ()*36); SecurityCode+= Code [codenumber]; } document.getElementById ("SecurityCode"). Value = SecurityCode; }4. Em seguida, criamos um mecanismo de verificação:
function verify () {var entercode = document.getElementById ("entercode"). value; if (Entercode.TOUPPERCASE () == SecurityCode) {alert ("A entrada está correta, passa a verificação!"); } else {entercode.value = ""; createCode (); }}5. Sob uma pequena modificação, código de verificação:
<estilo> #SecurityCode {Background-Color: #008000; Largura: 70px; Altura: 30px; Fonte-família: 'Kaiti', serif; Size da fonte: 20px; Cor: Branco; } </style>Avançado: Dicas avançadas para impedir ainda mais os robôs
Na maioria dos projetos com quem entrei em contato, os códigos de verificação sempre foram feitos pelo back -end. Nos últimos dois dias, havia uma página que precisava de códigos de verificação. Pensei imediatamente na implementação em segundo plano, mas de repente pensei que a maioria dos projetos não tinha requisitos de alta segurança e exigia algumas habilidades para bloquear robôs, então escrevi um código de verificação usando o front -end. E use a rotação na propriedade Transform do CSS3 para definir a rotação e, em seguida, obter algumas linhas de interferência e, finalmente, para adicionar uma camada de opacidade = 0 div no topo de todos os nós DOM, um código de verificação front-end será lançado.
Código vcode:
(function () {var randstr = function (length) {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: função (n) {var c = m -n + 1; função (len) {var _TE 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 = função () {this this.dom.clientHeight; "Z-Index: 999999"]. _TEM.UPDATE.CALL (This); "AA0000", "FFBB00"]; "#Ff7744",#888800 ",#008888"]; opções [i]; this.linedoms [i]); vcode.protype.draw = function () {this.codedoms = []; document.createElement ("span"); * ÍNDICE, this.uw * index + this.uw-10) + "px", "topo:" + randint (0, this.h-30) + "px", "transform: girar (" + randint (-30, 30) + "deg)", "-s-transform: girt (" + randint (-30, 30) + "deg)", "-M-short-trransform: girt (" + randint (-30, 30) + "deg)", "-M-short-transform: girt (" + randInt (-30, 30) + "deg)", "-, -MSform: "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-weight:" + randint(400, 900) . "Posição: Absoluto", "Opacity:" + Randint (3, 8) / 10, "Width:" + Randint (this.options.linewidthmin, this.options.linewidthmax) + "px", "altura:" + randint (this.options.LineHeight: this.option.Opt.OptMax) + " this.Options.Linecolors.Length-1)], "Esquerda:" + Randint (0, this.w-20) + "px", "topo:" + randint (0, this.h) + "px", "transform: groate (" + randint (-30, 30) + "deg)", "-msform: groate (" + randint (-30, 30) + "deg)", "-mssform: gotate (" + randint (-30, 30) + ")," "-mums: "-moz-transform: girate (" + randint (-30, 30) + "graus)", "-webkit-transform: girate (" + randint (-30, 30) + "deg)", "-o-transform: rolate (" + randint (-30, 30) + "grau)" "" 1)], "Possa de Fonte:" Randint (400, 900).uso:
// contêiner é o nó DOM do código de verificação var código = novo vcode (contêiner); // Verifique se está correto // inputCode é o código de verificação inserido pelo usuário.Verify (inputCode); // retorna verdadeiro ou falso