js-驗(yàn)證碼插件gVerify.js如何使用

js-驗(yàn)證碼插件gVerify.js?原地址:http://www.cnblogs.com/liaobeifeng/p/7085804.html

源碼:

!(function(window,?document)?{??

function?GVerify(options)?{?//創(chuàng)建一個(gè)圖形驗(yàn)證碼對(duì)象,接收options對(duì)象為參數(shù)??

this.options?=?{?//默認(rèn)options參數(shù)值??

id:"",?//容器Id??

canvasId:"verifyCanvas",?//canvas的ID??

width:"100",?//默認(rèn)canvas寬度??

height:"30",?//默認(rèn)canvas高度??

type:"blend",?//圖形驗(yàn)證碼默認(rèn)類(lèi)型blend:數(shù)字字母混合類(lèi)型、number:純數(shù)字、letter:純字母??

code:""??

????????}??


if(Object.prototype.toString.call(options)?==?"[object?Object]"){//判斷傳入?yún)?shù)類(lèi)型??

for(var?i?in?options)?{?//根據(jù)傳入的參數(shù),修改默認(rèn)參數(shù)值??

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?=?{??

/**版本號(hào)**/??

version:'1.0.0',??


/**初始化方法**/??

_init:function()?{??

var?con?=?document.getElementById(this.options.id);??

var?canvas?=?document.createElement("canvas");??

this.options.width?=?con.offsetWidth?>?0???con.offsetWidth?:?"100";??

this.options.height?=?con.offsetHeight?>?0???con.offsetHeight?:?"30";??

canvas.id?=this.options.canvasId;??

canvas.width?=this.options.width;??

canvas.height?=this.options.height;??

canvas.style.cursor?="pointer";??

canvas.innerHTML?="您的瀏覽器版本不支持canvas";??

????????????con.appendChild(canvas);??

var?parent?=?this;??

canvas.onclick?=function(){??

????????????????parent.refresh();??

????????????}??

????????},??


/**生成驗(yàn)證碼**/??

refresh:function()?{??

this.options.code?=?"";??

var?canvas?=?document.getElementById(this.options.canvasId);??

if(canvas.getContext)?{??

var?ctx?=?canvas.getContext('2d');??

}else{??

return;??

????????????}??


ctx.textBaseline?="middle";??


????????????ctx.fillStyle?=?randomColor(180,?240);??

ctx.fillRect(0,?0,this.options.width,?this.options.height);??


if(this.options.type?==?"blend")?{?//判斷驗(yàn)證碼類(lèi)型??

var?txtArr?=?this.options.numArr.concat(this.options.letterArr);??

}else?if(this.options.type?==?"number")?{??

var?txtArr?=?this.options.numArr;??

}else?{??

var?txtArr?=?this.options.letterArr;??

????????????}??


for(var?i?=?1;?i?<=?4;?i++)?{??

var?txt?=?txtArr[randomNum(0,?txtArr.length)];??

this.options.code?+=?txt;??

ctx.font?=?randomNum(this.options.height/2,?this.options.height)?+?'px?SimHei';?//隨機(jī)生成字體大小??

ctx.fillStyle?=?randomColor(50,?160);//隨機(jī)生成字體顏色??????????

????????????????ctx.shadowOffsetX?=?randomNum(-3,?3);??

????????????????ctx.shadowOffsetY?=?randomNum(-3,?3);??

????????????????ctx.shadowBlur?=?randomNum(-3,?3);??

ctx.shadowColor?="rgba(0,?0,?0,?0.3)";??

var?x?=?this.options.width?/?5?*?i;??

var?y?=?this.options.height?/?2;??

var?deg?=?randomNum(-30,?30);??

/**設(shè)置旋轉(zhuǎn)角度和坐標(biāo)原點(diǎn)**/??

????????????????ctx.translate(x,?y);??

????????????????ctx.rotate(deg?*?Math.PI?/?180);??

????????????????ctx.fillText(txt,?0,?0);??

/**恢復(fù)旋轉(zhuǎn)角度和坐標(biāo)原點(diǎn)**/??

????????????????ctx.rotate(-deg?*?Math.PI?/?180);??

????????????????ctx.translate(-x,?-y);??

????????????}??

/**繪制干擾線**/??

for(var?i?=?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();??

????????????}??

/**繪制干擾點(diǎn)**/??

for(var?i?=?0;?i?<?this.options.width/4;?i++)?{??

????????????????ctx.fillStyle?=?randomColor(0,?255);??

????????????????ctx.beginPath();??

ctx.arc(randomNum(0,this.options.width),?randomNum(0,?this.options.height),?1,?0,?2?*?Math.PI);??

????????????????ctx.fill();??

????????????}??

????????},??


/**驗(yàn)證驗(yàn)證碼**/??

validate:function(code){??

var?code?=?code.toLowerCase();??

var?v_code?=?this.options.code.toLowerCase();??

????????????console.log(v_code);??

if(code?==?v_code){??

return?true;??

}else{??

this.refresh();??

return?false;??

????????????}??

????????}??

????}??

/**生成字母數(shù)組**/??

function?getAllLetter()?{??

var?letterStr?=?"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";??

return?letterStr.split(",");??

????}??

/**生成一個(gè)隨機(jī)數(shù)**/??

function?randomNum(min,?max)?{??

return?Math.floor(Math.random()?*?(max?-?min)?+?min);??

????}??

/**生成一個(gè)隨機(jī)色**/??

function?randomColor(min,?max)?{??

var?r?=?randomNum(min,?max);??

var?g?=?randomNum(min,?max);??

var?b?=?randomNum(min,?max);??

return?"rgb("?+?r?+?","?+?g?+?","?+?b?+?")";??

????}??

????window.GVerify?=?GVerify;??

})(window,?document);??


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容