位置：首页-资讯-后端开发

JavaScript怎么实现页面动态验证码

2023-06-14 07:26

短信预约 -IT技能 免费直播动态提醒

小编给大家分享一下JavaScript怎么实现页面动态验证码，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

效果图：

JavaScript怎么实现页面动态验证码

实现思路：

把数字和字母放到一个数组中，通过随机的方式取得数组下标，总共取4个组成验证码；
把验证码渲染出来（一个一个的渲染）；
绘制一定数量的干扰线，随机颜色；
输入验证码，输入4位以后去验证，正确显示钩，错误显示叉并且刷新验证码。

编写构造函数

文本构造函数

//文字的构造函数function Text(o){this.x=0,//x坐标this.y=0,//y坐标this.text='',//内容this.font=null;//字体this.textAlign=null;//对齐方式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){//是否填充obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;ctx.fillText(obj.text,0,0);} ctx.restore();} return this;}

线段构造函数

 //直线的构造function Line(ctx,o){this.x=0,//x坐标this.y=0,//y坐标this.startX=0,//开始点x位置this.startY=0, //开始点y位置this.endX=0,//结束点x位置this.endY=0;//结束点y位置this.thin=false;//设置变细系数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;}//划线 ctx.moveTo(obj.startX, obj.startY); ctx.lineTo(obj.endX, obj.endY); ctx.stroke(); ctx.restore();}  return this;}

按长度获取验证码

//根据指定长度生成随机字母数字Verifiable.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;}

绘制文字

//绘制文字Verifiable.prototype.drawText=function(){var that=this;var count = 4;//文字个数var textW = 40;//文字所占宽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;//绘制文字text = new Text({x:x,y:textW-10,text:c,font:'30px ans-serif',textAlign:'center',fill:true,fillStyle:'#412D6A'});that.renderArr.push(text);})}

此时效果：

JavaScript怎么实现页面动态验证码

绘制干扰线

//绘制干扰线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++){//随机开始坐标，结束坐标、颜色startX = _.getRandom(0,140);startY = _.getRandom(0,40);endX = _.getRandom(0,140);endY = _.getRandom(0,40);color = _.getRandomColor();//定义一条直线line = new Line(ctx,{x:0,y:0, startX:startX, startY:startY, endX:endX, endY:endY, strokeStyle:color})this.renderArr.push(line);}}

此时效果如下：

JavaScript怎么实现页面动态验证码

加入页面布局

<!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'>  验证码：<input size=10 id='codeInput'><img id='stateImg' ></img>  </div>  <div id="container">  <div id='box'></div>  <a href="javascript:void 0" class="refresh" onclick="refresh()">换一张</a>  </div></body><script type="text/javascript" class="lazy" data-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);//换一张function refresh(){verifiable.renderArr.length=0;verifiable.draw();}  </script></html>

加入输入框事件

//输入框事件Verifiable.prototype.inputValid=function(input){var val = input.value;if(val.length<4) return ;if(this.code==val){console.log('suc');this.result(0);}else{this.result(1);}}

加入成功、失败验证

//处理结果Verifiable.prototype.result=function(result){var codeInput = this.codeInput;var stateImg = this.stateImg;if(result==0){//成功stateImg.class="lazy" data-src="./images/suc.jpeg";codeInput.readOnly=true;}else {//失败codeInput.readOnly=false;stateImg.class="lazy" data-src="./images/fail.jpeg";this.renderArr.length=0;this.draw();}}

完成

JavaScript怎么实现页面动态验证码