Quote:
Now many in the user login or registration in order to prevent program attacks, joined the dynamic verification technology, generally let the user input immediately generated verification code to achieve. I wrote a no interaction with the background, on the front end of the verification, sent out for everyone to see.
Effect:
Implementation idea:
-
The numbers and letters into an array, through a random way to obtain the array subscript, a total of 4 components of the verification code;
-
Render captchas (one by one);
-
Draw a certain number of interference lines, random color;
-
Input verification code, input 4 bits later to verify, correct display hook, error display fork and refresh the verification code.
Writing constructors
Text constructor
Function Text(o){this.x=0,//x this.y=0,//y this. Text = "",// contents this.font=null; / / this font. TextAlign = null; // align this.init(o); } Text.prototype.init=function(o){ for(var key in o){ this[key]=o[key]; } } Text.prototype.render=function(context){ this.ctx=context; innerRender(this); function innerRender(obj){ var ctx=obj.ctx; ctx.save() ctx.beginPath(); ctx.translate(obj.x,obj.y); if(obj.font){ ctx.font=obj.font; } if(obj.textAlign){ ctx.textAlign=obj.textAlign; } if(obj.fill){// Whether to fill obj.fillstyle? (ctx.fillStyle=obj.fillStyle):null; CTX. FillText (obj. Text, 0, 0). } ctx.restore(); } return this; }Copy the codeLine segment constructor
Function Line(CTX,o){this.x=0,// this.y=0,// this.startX=0,// // this. EndX =0, this.endY=0; This. thin=false; // Set the fining coefficient this. CTX = CTX; this.init(o); } Line.prototype.init=function(o){ for(var key in o){ this[key]=o[key]; } } Line.prototype.render=function(){ innerRender(this); function innerRender(obj){ var ctx=obj.ctx; ctx.save() ctx.beginPath(); ctx.translate(obj.x,obj.y); If (obj. Thin) {CTX. Translate (0.5, 0.5); } if(obj.lineWidth){CTX. LineWidth =obj.lineWidth; } if(obj.strokeStyle){ ctx.strokeStyle=obj.strokeStyle; } // dash ctx.moveto (obj.startx, obj.starty); ctx.lineTo(obj.endX, obj.endY); ctx.stroke(); ctx.restore(); } return this; }Copy the codeObtain the verification code by length
/ / according to the specified length to generate random alphanumeric Verifiable. The prototype. RandomWord = function (range) {var STR = "", pos, arr = [' 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', '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']; for(var i=0; i<range; i++){ pos = Math.round(Math.random() * (arr.length-1)); str += arr[pos]; } return str; }Copy the codeRendering text
/ / draw the text Verifiable. Prototype. DrawText = function () {var that = this; var count = 4; Var textW = 40; Var code=this.code = this.randomWord(count); var code=this.code = this.randomword (count); var codeArr = code.split(""); var text,x ; codeArr.forEach(function(c,i){ x = that.w/count*i+textW/2; // Draw text = new text ({x:x, y: textw-10, text:c, font:'30px ans-serif', textAlign:'center', fill:true, fillStyle:'#412D6A' }); that.renderArr.push(text); })}Copy the codeEffect:
Plot interference line
/ / draw the line interference Verifiable. Prototype. Interfering = function () {var count = this. LineCount = 20, line, CTX = this. CTX. var startX, startY, endX, endY, color; for(var i=0; i<count; I++){// random start coordinates, end coordinates, color startX = _.getrandom (0,140); StartY = _. GetRandom (0 40); EndX = _. GetRandom (0140); EndY = _. GetRandom (0 40); color = _.getRandomColor(); // define a line = new line (CTX,{x:0, y:0, startX:startX, startY:startY, endX:endX, endY:endY, CTX :0, startX:startX, startY:startY, endX:endX, endY:endY, strokeStyle:color }) this.renderArr.push(line); }}Copy the codeThe effect is as follows:
Add page layout
<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>verifiable</title> <style> #box{ width:140px; height:40px; position:absolute; } #inputDiv{ width:220px; position:absolute; margin:0 auto; left:0; top:30px; right:0; bottom:0; } #container{ width:220px; height:60px; position:absolute; margin:0 auto; left:0; top:60px; right:0; bottom:0; } .refresh{ position:absolute; left:140px; } </style> </head> <body> <div id='inputDiv'> verification code: <input size=10 id='codeInput'><img id='stateImg' style="vertical-align: middle; width:20px"></img> </div> <div id="container"> <div id='box'></div> <a href="javascript:void 0" class="refresh" </a> </div> </body> <script type="text/javascript" SRC ='verifiable. Js '></script> <script type="text/javascript"> var box = document.getElementById('box'); var stateImg = document.getElementById('stateImg'); var codeInput = document.getElementById('codeInput'); verifiable.init(box,codeInput,stateImg); / / in a function refresh () {verifiable. RenderArr. Length = 0; verifiable.draw(); } </script> </html>Copy the codeAdd input box events
/ / input box event Verifiable. Prototype. InputValid = function (input) {var val = input. The value; if(val.length<4) return ; if(this.code==val){ console.log('suc'); this.result(0); }else{ this.result(1); }}Copy the codeVerify the joining success or failure
/ / processing results Verifiable. The prototype. The result = function (result) {var codeInput = this. CodeInput; var stateImg = this.stateImg; If (result = = 0) {/ / success stateImg. SRC = ". / images/suc. Jpeg "; codeInput.readOnly=true; }else {// fail codeInput.readOnly=false; stateImg.src="./images/fail.jpeg"; this.renderArr.length=0; this.draw(); }}Copy the code