本文介绍一些常用工具1、验证码如下图所示。一般的后台管理系统在登录的时候都会设计一个验证码，这个验证码是前端生成的。单击画布以切换验证码。二维码的类型是数字还是字母，您可以根据需要设置。1、验证码的js如下图所示。首先，验证码的jsverifyCode代码介绍如下，可以根据需要修改长宽（_init方法中的宽高）。验证码的类型、颜色、干扰线等。functionGVerify(options){//创建图形验证码对象，接收options对象作为参数this.options={//默认options参数值id:'',//容器IdcanvasId:'verifyCanvas',//ofcanvasIDwidth:'100',//默认画布宽度height:'38',//默认画布高度type:'number',//默认图形验证码类型blend:数字和字母混合类型,number:purenumber,letter:Purelettercode:''}if(Object.prototype.toString.call(options)==='[objectObject]'){//判断传入参数的类型for(variinoptions){//根据传入参数，修改默认参数值this.options[i]=options[i]}}else{this.options.id=options}this.options.numArr='0,1,2,3,4,5,6,7,8,9'.split(',')this.options.letterArr=getAllLetter()this._init()this.refresh()}GVerify.prototype={/**版本号**/version:'1.0.0',/**初始化方法**/_init:function(){varcon=document.getElementById(this.options.id)varcanvas=document.createElement('canvas')//this.options.width=con.offsetWidth>0?con.offsetWidth:'30'//this.options.height=con.offsetHeight>0?con.offsetHeight:'30'this.options.width='100'this.options.height='38'canvas.id=this.options.canvasIdcanvas.width=this.options.widthcanvas.height=this.options.heightcanvas.style.cursor='pointer'canvas.innerHTML='您的浏览器版本不支持canvas'con.appendChild(canvas)varparent=thiscanvas.onclick=function(){parent.refresh()}},/**生成验证码**/refresh:function(){this.options.code='';varcanvas=document.getElementById(this.options.canvasId)if(canvas.getContext){varctx=canvas.getContext('2d')}ctx.textBaseline='middle'ctx.fillStyle=randomColor(180,240)ctx.fillRect(0,0,this.options.width,this.options.height)让txtArr='';if(this.options.type==='blend'){//判别验证码类型txtArr=this.options.numArr.concat(this.options.letterArr)}elseif(this.options.type==='number'){txtArr=this.options.numArr}else{txtArr=this.options.letterArr}for(vari=1;i<=4;i++){vartxt=txtArr[randomNum(0,txtArr.length)]this.options.code+=txtctx.font=randomNum(this.options.height/2,this.options.height)+'pxSimHei'//随机生成字体大小ctx.fillStyle=randomColor(50,160)//随机生成字体颜色ctx.shadowOffsetX=randomNum(-3,3)ctx.shadowOffsetY=randomNum(-3,3)ctx.shadowBlur=randomNum(-3,3)ctx.shadowColor='rgba(0,0,0,0.3)'varx=this.options.width/5*ivary=this.options.height/2vardeg=randomNum(-30,30)/**设置旋转角度和坐标原点**/ctx.translate(x,y)ctx.rotate(deg*Math.PI/180)ctx.fillText(txt,0,0)/**恢复旋转角度和坐标原点**/ctx.rotate(-deg*Math.PI/180)ctx.translate(-x,-y)}/**绘制干扰线**/for(leti=0;i<4;i++){ctx.strokeStyle=randomColor(40,180)ctx.beginPath()ctx.moveTo(randomNum(0,this.options.width),randomNum(0,this.options.height))ctx.lineTo(randomNum(0,this.options.width),randomNum(0,this.options.height))ctx.stroke()}/**绘制干扰点**/for(leti=0;i
