Version de base
À en juger par notre expérience quotidienne dans l'accès en ligne, le code de vérification est généralement à quatre chiffres, composé de chiffres et de lettres.
Ensuite, l'affiche conduira tout le monde à utiliser JavaScript étape par étape pour créer un script de code de vérification!
Donnez d'abord le produit fini, afin que tout le monde puisse comprendre:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <style> #SecurityCode {background-Color: # 008000; Largeur: 70px; hauteur: 30px; Font-Family: «Kaiti», Serif; taille de police: 20px; Couleur: blanc; } nous 'A', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', `` o ',' p ',' q ',', ',' s ',' z '); var codeNumber; SecurityCode = ""; // Variables globales, faciliter la vérification ultérieure pour (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.getElementyId ("entercode"). valeur; if (entercode.touppercase () == SecurityCode) {alert ("Input correct, pass vérification!"); } else {entercode.value = ""; createCode (); }} </ script> <taptry> jizhen tan </tapt> </adg> <body onload = "checkcookie ()"> <input type = "text" id = "entercode"> <br/> <input type = "Button" id = "Securitycode" onClick = "CreateCode ()"> <a href = "## # # # # # @click =" CreateCode () ") <input type = "Button" style = "background-Color: # 0099ff; font-size: 20px;" value = "Verify" onClick = "Verify ()"> </body> </html>1. Puisqu'il s'agit d'un code de vérification à quatre chiffres, notre idée doit être ouverte. Tout d'abord, nous avons besoin d'un tableau pour stocker des lettres et des chiffres.
Var Code = Nouveau tableau (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 ',', ',' s ',' z ');
2. Ensuite, nous devons le laisser afficher au hasard les éléments du tableau. Ici, nous créons une variable CodeNumber pour afficher au hasard les nombres, mais ce dont nous avons besoin est un code de vérification quatre bits, et maintenant les éléments du tableau sont tous célibataires, que devons-nous faire? Simple! Créons une variable de code de sécurité pour stocker des éléments dans le tableau. Le code est le suivant:
var codeNumber; SecurityCode = ""; // Variables globales, faciliter la vérification ultérieure pour (var i = 0; i <4; i ++) {coDenumber = math.floor (math.random () * 36); SecurityCode + = Code [CodeNumber]; }On peut voir qu'à l'heure actuelle, la variable SecurityNumber stocke un code de vérification aléatoire quatre bits.
3. D'accord, après deux étapes simples, nous avons obtenu le code de vérification à quatre chiffres. Nous le mettons dans une fonction CreateCode.
function createCode () {var code = nouveau tableau (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 ',', ',' s ',' z '); var codeNumber; SecurityCode = ""; // Variables globales, faciliter la vérification ultérieure pour (var i = 0; i <4; i ++) {coDenumber = math.floor (math.random () * 36); SecurityCode + = Code [CodeNumber]; } document.getElementById ("SecurityCode"). Value = SecurityCode; }4. Ensuite, nous créons un mécanisme de vérification:
function Verify () {var entercode = document.getElementById ("entercode"). valeur; if (entercode.touppercase () == SecurityCode) {alert ("l'entrée est correcte, passez la vérification!"); } else {entercode.value = ""; createCode (); }}5. Sous une petite modification, code de vérification:
<style> #SeCurityCode {Background-Color: # 008000; Largeur: 70px; hauteur: 30px; Font-Family: «Kaiti», Serif; taille de police: 20px; Couleur: blanc; } </ style>Avancé: conseils avancés pour arrêter davantage les robots
Dans la plupart des projets avec lesquels je suis entré en contact, les codes de vérification ont toujours été réalisés par le backend. Au cours des deux derniers jours, il y avait une page qui avait besoin de codes de vérification. J'ai immédiatement pensé à la mise en œuvre de l'arrière-plan, mais soudain, je pensais que la plupart des projets n'avaient pas de fortes exigences de sécurité et avaient besoin de compétences pour bloquer les robots, alors j'ai écrit un code de vérification en utilisant le frontal. Et utilisez la rotation dans la propriété de transformation de CSS3 pour définir la rotation, puis obtenez des lignes d'interférence au hasard, et enfin, afin d'ajouter une couche d'opacité = 0 div au-dessus de tous les nœuds DOM, un code de vérification frontal sortira.
Code Vcode:
(function () {var randstr = function (longueur) {var key = {str: [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', `` o ',' p ',' q ',' r ',' s ',' ',', ',' o ',' p ',' q ',' r ',', ',' ',', ' s ',' t ',' x ',' u ',' v ',' y ',' z ',' w ',' n ',' 0 ',' 1 ',' 2 ',' 3 ',' 4 ',' 5 ',' 6 ',' 7 ',' 8 ',' 9 ' ], RanDiN: N, m) {var c = m-n + 1; Fonctionnement (Len) {var _Te Math.Random () * C + N; vCode.prototype.init = fonction () {this.dom.style.position = "relatif"; this.dom.clientwidth; Absolute "," curseur: pointeur "," z-index: 9999999 "] .join ("; "); dom.title =" Cliquez pour modifier le code de vérification "; this.dom.ApendChild (dom);}; vcode.prototype.addEvent = function () {var _this = this; _this.Dom.adDevent (" CLICK () ") _This.Dom.Dom.AdDevent (" Click ") _This.Dom.Devent. _This.update.call (_This);});}; "# Aa0000", "ffbb00"]; "# Ff7744", "# 88800", "# 00888"]; Options [i];}}}; this.dom.removechild (this.linedoms [i]); vCode.prototype.Draw = fonction () {this.codedoms = []; Document.CreateElement ("Span"); dom.style.csstext = ["Font-Size:" + RandInt (this.options.fontisemin, this.options.fontsizemax) + "PX" Randint (this.uw * index, this.uw * index + 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 ("+" + "deg)" "-Moz-TRANSFORM (" ROTATE ("+ +" Deg) " randint (-30, 30) + "deg)", "-webkit-transform: rotate (" + randint (-30, 30) + "deg)", "-o-transform: rotate (" + randint (-30, 30) + "deg)", "Font-Family:" + this.options.fonts [Randint (0, cette. RandInt (400, 900). dom.style.csstext = ["position: absolu", "opacité:" + randint (3, 8) / 10, "width:" + randint (this.options.linewidthmin, this.options.linewidthmax) + "px", "height:" + randnt (this.options.lineHeightMin, this.options. this.options.lineColors [randint (0, this.options.lineColors.length - 1)], "gauche:" + randint (0, this.w - 20) + "px", "top:" + randint (0, this.h) + "px", "transform: ratate (" + randint (-30, 30) + "deg)", "-ms-transform: rotate: rotate (+ randin "DEG)", "-moz-transform: rotation (" + randint (-30, 30) + "deg)", "-webkit-transform: rotate (" + randint (-30, 30) + "deg)", "-o-transform: rotate (" + randnt (-30, 30) + "deg)", "Font-Family:" + this.options. this.options.fonts.length - 1), "Font-Weight:" + RandInt (400, 900).usage:
// Container est le nœud Dom du code de vérification var code = new vCode (conteneur); // Vérifiez s'il est correct // InputCode est le code de vérification entré par User.Verify (InputCode); // Renvoie vrai ou faux