Basic version
Judging from our daily experience in online access, the verification code is generally four digits, composed of numbers and letters.
Then the poster will lead everyone to use JavaScript step by step to create a verification code script!
First give the finished product, so that everyone can understand:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #securityCode{ background-color: #008000; width:70px; height:30px; font-family: 'KaiTi', serif; font-size: 20px; color:white; } </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="";//Global variables, facilitate subsequent verification for(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("Input correct, pass verification!"); } 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; font-size: 20px;"value="verify" onclick="verify()"></body></html>1. Since it is a four-digit verification code, our idea needs to be opened. First, we need an array to store letters and numbers.
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');
2. Then we need to let it randomly display the elements in the array. Here we create a codeNumber variable to randomly display the numbers, but what we need is a four-bit verification code, and now the elements in the array are all single, what should we do? Simple! Let's create a securityCode variable to store elements in the array. The code is as follows:
var codeNumber; securityCode="";//Global variables, facilitate subsequent verification for(var i=0;i<4;i++){ codeNumber=Math.floor(Math.random()*36); securityCode+=code[codeNumber]; }It can be seen that at this time the securityNumber variable stores a four-bit random verification code.
3. Okay, after two simple steps, we got the four-digit verification code. We put it in a createCode function.
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="";//Global variables, facilitate subsequent verification for(var i=0;i<4;i++){ codeNumber=Math.floor(Math.random()*36); securityCode+=code[codeNumber]; } document.getElementById("securityCode").value=securityCode; }4. Next we create a verification mechanism:
function verify(){ var enterCode=document.getElementById("enterCode").value; if(enterCode.toUpperCase()==securityCode){ alert("Input is correct, pass verification!"); } else{ enterCode.value=""; createCode(); } }5. Under a small modification, verification code:
<style> #securityCode{ background-color: #008000; width:70px; height:30px; font-family: 'KaiTi', serif; font-size: 20px; color:white; } </style>Advanced: Advanced tips to further stop robots
In most projects I came into contact with, verification codes have always been done by the backend. In the past two days, there happened to be a page that needed verification codes. I immediately thought about the background implementation, but suddenly I thought that most projects did not have high security requirements and required some skills to block robots, so I wrote a verification code using the front end. And use the rotation in the transform property of CSS3 to set the rotation, then randomly get some interference lines, and finally, in order to add a layer of opacity=0 DIV on top of all DOM nodes, a front-end verification code will come out.
vCode code:
(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 : function(n,m){ var c = m-n+1; var num = Math.random() * c + n; return Math.floor(num); }, randStr : function(){ var _this = this; var length = _this.str.length - 1; var randkey = _this.randint(0, length); return _this.str[randkey]; }, create : 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 = "relative"; this.dom.style.overflow = "hidden"; this.dom.style.cursor = "pointer"; this.dom.title = "Click to change the verification code"; this.dom.style.background = this.options.bgColor; this.w = this.dom.clientWidth; this.h = this.dom.clientHeight; this.uW = this.w / this.options.len; }; vCode.prototype.mask = function(){ var dom = document.createElement("div"); dom.style.cssText = [ "width: 100%", "height: 100%", "left: 0", "top: 0", "position: absolute", "cursor: pointer", "z-index: 9999999" ].join(";"); dom.title = "Click to change the verification code"; this.dom.appendChild(dom); }; vCode.prototype.addEvent = function(){ var _this = this; _this.dom.addEventListener("click", function(){ _this.update.call(_this); }); }; vCode.prototype.initOptions = function(options){ var f = function(){ this.len = 4; this.fontSizeMin = 20; this.fontSizeMax = 48; this.colors = [ "green", "red", "blue", "#53da33", "#AA0000", "#FFBB00" ]; this.bgColor = "#FFF"; this.fonts = [ "Times New Roman", "Georgia", "Serif", "sans-serif", "arial", "tahoma", "Hiragino Sans GB" ]; this.lines = 8; this.lineColors = [ "#888888", "#FF7744", "#888800", "#008888" ]; this.lineHeightMin = 1; this.lineHeightMax = 3; this.lineWidthMin = 1; this.lineWidthMax = 60; }; this.options = new f(); if(typeof options === "object"){ for(i in options){ this.options[i] = options[i]; } } } }; vCode.prototype.update = function(){ for(var i=0; i<this.codeDoms.length; i++){ this.dom.removeChild(this.codeDoms[i]); } for(var i=0; i<this.lineDoms.length; i++){ this.dom.removeChild(this.lineDoms[i]); } this.createCode(); this.draw(); }; vCode.prototype.createCode = function(){ this.code = randstr(this.options.len); }; vCode.prototype.verify = function(code){ return this.code === code; }; vCode.prototype.draw = function(){ this.codeDoms = []; for(var i=0; i<this.code.length; i++){ this.codeDoms.push(this.drawCode(this.code[i], i)); } this.drawLines(); }; vCode.prototype.drawCode = function(code, index){ var dom = document.createElement("span"); dom.style.cssText = [ "font-size:" + randint(this.options.fontSizeMin, this.options.fontSizeMax) + "px", "color:" + this.options.colors[randint(0, this.options.colors.length - 1)], "position: absolute", "left:" + 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(" + 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, this.options.fonts.length - 1)], "font-weight:" + randint(400, 900) ].join(";"); dom.innerHTML = code; this.dom.appendChild(dom); return dom; }; vCode.prototype.drawLines = function(){ this.lineDoms = []; for(var i=0; i<this.options.lines; i++){ var dom = document.createElement("div"); dom.style.cssText = [ "position: absolute", "opacity: " + randint(3, 8) / 10, "width:" + randint(this.options.lineWidthMin, this.options.lineWidthMax) + "px", "height:" + randint(this.options.lineHeightMin, this.options.lineHeightMax) + "px", "background: " + 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.options.fonts[randint(0, this.options.fonts.length - 1)], "font-weight:" + randint(400, 900) ].join(";"); this.dom.appendChild(dom); this.lineDoms.push(dom); } }; this.vCode = vCode; }).call(this);usage:
//Container is the DOM node of the verification code var code = new vCode(container); // Verify whether it is correct// InputCode is the verification code entered by the user.verify(inputCode); // return true or false