好资源导航 » 文章资讯 » 多种类型jQuery网页验证码插件代码实例

多种类型jQuery网页验证码插件代码实例

2023-07-07 00:43:02 88

html






jQuery网页验证码插件



数字字母验证码

确定算数验证码

确定滑动验证码

拼图验证码

点选验证码

$('#mpanel2').codeVerify({ type:1, width:'200px', height:'50px', fontSize:'30px', codeLength:6, btnId:'check-btn', ready:function(){ }, success:function(){ alert('验证匹配！'); }, error:function(){ alert('验证码不匹配！'); } }); $('#mpanel3').codeVerify({ type:2, figure:50, //位数，仅在type=2时生效 arith:0, //算法，支持加减乘，不填为随机，仅在type=2时生效 width:'200px', height:'50px', fontSize:'30px', btnId:'check-btn2', ready:function(){ }, success:function(){ alert('验证匹配！'); }, error:function(){ alert('验证码不匹配！'); } }); $('#mpanel1').slideVerify({ type:1, //类型 vOffset:5, //误差量，根据需求自行调整 barSize:{ width:'50%', height:'40px', }, ready:function(){ }, success:function(){ alert('验证成功，添加你自己的代码！'); //......后续操作 }, error:function(){ // alert('验证失败！'); } }); $('#mpanel4').slideVerify({ type:2, //类型 vOffset:5, //误差量，根据需求自行调整 vSpace:5, //间隔 imgName:['1.jpg','2.jpg'], imgSize:{ width:'300px', height:'200px', }, blockSize:{ width:'40px', height:'40px', }, barSize:{ width:'300px', height:'40px', }, ready:function(){ }, success:function(){ alert('验证成功，添加你自己的代码！'); //......后续操作 }, error:function(){ // alert('验证失败！'); } }); $('#mpanel5').pointsVerify({ defaultNum:4, //默认的文字数量 checkNum:2, //校对的文字数量 vSpace:5, //间隔 imgName:['1.jpg','2.jpg'], imgSize:{ width:'400px', height:'200px', }, barSize:{ width:'400px', height:'40px', }, ready:function(){ }, success:function(){ alert('验证成功，添加你自己的代码！'); //......后续操作 }, error:function(){ // alert('验证失败！'); } }); $('#mpanel6').pointsVerify({ defaultNum:4, //默认的文字数量 checkNum:2, //校对的文字数量 vSpace:5, //间隔 imgName:['1.jpg','2.jpg'], imgSize:{ width:'400px', height:'200px', }, barSize:{ width:'400px', height:'40px', }, ready:function(){ }, success:function(){ alert('验证成功，添加你自己的代码！'); //......后续操作 }, error:function(){ // alert('验证失败！'); } });

verify.css

/*常规验证码*/
.verify-code{
	font-size:20px;
	text-align:center;
	cursor:pointer;
	margin-bottom:5px;
	border:1pxsolid#ddd;
}

.cerify-code-panel{
	height:100%;
	overflow:hidden;
}

.verify-code-area{
	float:left;
}

.verify-input-area{
	float:left;
	width:60%;
	padding-right:10px;
}
.verify-change-area{
	line-height:30px;
	float:left;
}
.varify-input-code{
	display:inline-block;
	width:100%;
	height:25px;
}

.verify-change-code{
	color:#337AB7;
	cursor:pointer;
}

.verify-btn{
	width:200px;
	height:30px;
	background-color:#337AB7;
	color:#FFFFFF;
	border:none;
	margin-top:10px;
}






/*滑动验证码*/
.verify-bar-area{
position:relative;
background:#FFFFFF;
	text-align:center;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
	border:1pxsolid#ddd;
	-webkit-border-radius:4px;
}

.verify-bar-area.verify-move-block{
position:absolute;
top:0px;
left:0;
background:#fff;
cursor:pointer;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
box-shadow:002px#888888;
-webkit-border-radius:1px;
}

.verify-bar-area.verify-move-block:hover{
background-color:#337ab7;
color:#FFFFFF;
}

.verify-bar-area.verify-left-bar{
position:absolute;
top:-1px;
left:-1px;
	background:#f0fff0;
cursor:pointer;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
border:1pxsolid#ddd;
}

.verify-img-panel{
	margin:0;
	-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
	border:1pxsolid#ddd;
	border-radius:3px;
	position:relative;
}

.verify-img-panel.verify-refresh{
	width:25px;
	height:25px;
	text-align:center;
	padding:5px;
	cursor:pointer;
	position:absolute;
	top:0;
	right:0;
	z-index:2;
}

.verify-img-panel.icon-refresh{
	font-size:20px;
	color:#fff;
}

.verify-img-panel.verify-gap{
	background-color:#fff;
	position:relative;
	z-index:2;
	border:1pxsolid#fff;
}

.verify-bar-area.verify-move-block.verify-sub-block{
	position:absolute;
text-align:center;
	z-index:3;
	border:1pxsolid#fff;
}

.verify-bar-area.verify-move-block.verify-icon{
	font-size:18px;
}

.verify-bar-area.verify-msg{
	z-index:3;
}

/*字体图标的css*/
@font-face{font-family:"iconfont";
src:url('../fonts/iconfont.eot?t=1508229193188');/*IE9*/
src:url('../fonts/iconfont.eot?t=1508229193188#iefix')format('embedded-opentype'),/*IE6-IE8*/
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAaAAAsAAAAACUwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kiSY21hcAAAAYAAAAB3AAABuM+qBlRnbHlmAAAB+AAAAnQAAALYnrUwT2hlYWQAAARsAAAALwAAADYPNwajaGhlYQAABJwAAAAcAAAAJAfeA4dobXR4AAAEuAAAABMAAAAYF+kAAGxvY2EAAATMAAAADgAAAA4CvAGsbWF4cAAABNwAAAAfAAAAIAEVAF1uYW1lAAAE/AAAAUUAAAJtPlT+fXBvc3QAAAZEAAAAPAAAAE3oPPXPeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxbwtzwv4EhhrmBoQEozAiSAwAw1A0UeJzFkcENgCAMRX8RjCGO4gTe9eQcnhzAfXC2rqG/hYsT8MmD9gdS0gJIAAaykAjIBYHppCvuD8juR6zMJ67A89Zdn/f1aNPikUn8RvYo8G20CjKim6Rf6b9m34+WWd/vBr+oW8V6q3vF5qKlYrPRp4L0Ad5nGL8AeJxFUc9rE0EYnTezu8lMsrvtbrqb3TRt0rS7bdOmdI0JbWmCtiItIv5oi14qevCk9SQVLFiQgqAF8Q9QLKIHLx48FkHo3ZNnFUXwD5C2B6dO6sFhmI83w7z3fe8RnZCjb2yX5YlLhskkmScXCIFRxYBFiyjH9Rqtoqes9/g5i8WVuJyqDNTYLPwBI+cljXrkGynDhoU+nCgnjbhGY5yst+gMEq8IBIXwsjPU67CnEPm4b0su0h309Fd67da4XBhr55KSm17POk7gOE/Shq6nKdVsC7d9j+tcGPKVboc9u/0jtB/ZIA7PXTVLBef6o/paccjnwOYm3ELJetPuDrvV3gg91wlSXWY6H5qVwRzWf2TybrYYfSdqoXOwh/Qa8RWIjBTiSI3h614/vKSNRhONOrsnQi6Xf4nQFQDTmJE1NKbhI6crHEJO/+S5QPxhYJRRyvBFBP+5T9EPpEAIVzzRQIrjmJ6jY1WTo+NXTMchuBsKuS8PRZATSMl9oTA4uNLkeIA0V1UeqOoGQh7IAxGo+7T83fn3T+voqCNPPAUazUYUI7LgKSV1Jk2oUeghYGhZ+cKOe2FjVu5ZKEY2VkE13AK1+jI4r1KLbPlZfrKiPhOXKPRj7q9sj9XJ7LFHNmrKJS3VCdhXGSdKrtmoQaWeMjQVt0KD6sGPOx0oH2fgtzoNROxtNq8F3tzYM/n+TjKSX5qf2jx941276TIr9FjXxKr8eX/6bK4yuopwo9py1sw8F9kdw4AmurRpLUM3tYx5ZnKpfHPi8dzz19vJ6MjyxYUrpqeb1uLs3eGV6vr21pSqpeWkqonAN9oUyIiXpv8XvlN5e3icY2BkYGAA4n0vN4fG89t8ZeBmYQCBa9wPPRH0/wcsDMwmQC4HAxNIFABAfAqaAHicY2BkYGBu+N/AEMPCAAJAkpEBFbABAEcMAm94nGNhYGBgfsnAwMKAigESnwEBAAAAAAAAdgCkANoBCAFsAAB4nGNgZGBgYGMIZGBlAAEmIOYCQgaG/2A+AwARSAFzAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgI2RiZGZkYWRlZGNkZ2BsYI1OSM1OZs1OSe/OJW1KDM9o4S9KDWtKLU4g4EBAJ79CeQ=')format('woff'),
url('../fonts/iconfont.ttf?t=1508229193188')format('truetype'),/*chrome,firefox,opera,Safari,Android,iOS4.2+*/
url('../fonts/iconfont.svg?t=1508229193188#iconfont')format('svg');/*iOS4.1-*/
}

.iconfont{
font-family:"iconfont"!important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

.icon-check:before{content:"\e645";}

.icon-close:before{content:"\e646";}

.icon-right:before{content:"\e6a3";}

.icon-refresh:before{content:"\e6a4";}

verify.js

/*!Verify-v0.1.0MITLicenseby大熊*/

;(function($,window,document,undefined){

	//定义Code的构造函数
varCode=function(ele,opt){
this.$element=ele,
this.defaults={
	type:1,
	figure:100,	//位数，仅在type=2时生效
	arith:0,	//算法，支持加减乘，0为随机，仅在type=2时生效
	width:'200px',
		height:'60px',
		fontSize:'30px',
	codeLength:6,
	btnId:'check-btn',
	ready:function(){},
	success:function(){},
error:function(){}
},
this.options=$.extend({},this.defaults,opt)
};
var_code_chars=[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'];
var_code_color1=['#fffff0','#f0ffff','#f0fff0','#fff0f0'];
var_code_color2=['#FF0033','#006699','#993366','#FF9900','#66CC66','#FF33CC'];

//定义Code的方法
Code.prototype={
	init:function(){
			var_this=this;
			this.loadDom();
			this.setCode();
			this.options.ready();
			this.$element[0].onselectstart=document.body.ondrag=function(){
				returnfalse;
			};
			//点击验证码
			this.$element.find('.verify-code,.verify-change-code').on('click',function(){
				_this.setCode();
			});
			//确定的点击事件
			this.htmlDoms.code_btn.on('click',function(){
				_this.checkCode();
			});
	},

	//加载页面
	loadDom:function(){
		varpanelHtml='\
\
\
\
\
\
\
换一张\
\
\
';
	this.$element.append(panelHtml);

	this.htmlDoms={
		code_btn:$('#'+this.options.btnId),
		code:this.$element.find('.verify-code'),
		code_area:this.$element.find('.verify-code-area'),
		code_input:this.$element.find('.varify-input-code'),
	};

	this.htmlDoms.code.css({'width':this.options.width,'height':this.options.height,'line-height':this.options.height,'font-size':this.options.fontSize});
	this.htmlDoms.code_area.css({'width':this.options.width});
	},

	//设置验证码
	setCode:function(){
		varcolor1Num=Math.floor(Math.random()*3);
		varcolor2Num=Math.floor(Math.random()*5);

		this.htmlDoms.code.css({'background-color':_code_color1[color1Num],'color':_code_color2[color2Num]});
		this.htmlDoms.code_input.val('');

		varcode='';
		this.code_chose='';

		if(this.options.type==1){	//普通验证码
				for(vari=0;i'+_code_chars[charNum]+'';
				}
		}else{		//算法验证码
			varnum1=Math.floor(Math.random()*this.options.figure);
			varnum2=Math.floor(Math.random()*this.options.figure);

			if(this.options.arith==0){
				vartmparith=Math.floor(Math.random()*3);
			}

			switch(tmparith){
				case1:
					this.code_chose=parseInt(num1)+parseInt(num2);
					code=num1+'+'+num2+'=?';
					break;
				case2:
					if(parseInt(num1)';
	this.$element.append(panelHtml);

	this.htmlDoms={
		gap:this.$element.find('.verify-gap'),
		sub_block:this.$element.find('.verify-sub-block'),
		img_panel:this.$element.find('.verify-img-panel'),
		bar_area:this.$element.find('.verify-bar-area'),
		move_block:this.$element.find('.verify-move-block'),
		left_bar:this.$element.find('.verify-left-bar'),
		msg:this.$element.find('.verify-msg'),
		icon:this.$element.find('.verify-icon'),
		refresh:this.$element.find('.verify-refresh')
	};

	this.status=false;	//鼠标状态
	this.setSize=this.resetSize(this);	//重新设置宽度高度

	this.htmlDoms.gap.css({'width':this.options.blockSize.width,'height':this.options.blockSize.height});
	this.htmlDoms.sub_block.css({'width':this.options.blockSize.width,'height':this.options.blockSize.height});
	this.htmlDoms.img_panel.css({'width':this.setSize.img_width,'height':this.setSize.img_height,'background':'url(images/'+this.options.imgName[this.img_rand]+')','background-size':this.setSize.img_width+''+this.setSize.img_height});
	this.htmlDoms.bar_area.css({'width':this.setSize.bar_width,'height':this.options.barSize.height,'line-height':this.options.barSize.height});
	this.htmlDoms.move_block.css({'width':this.options.barSize.height,'height':this.options.barSize.height});
	this.htmlDoms.left_bar.css({'width':this.options.barSize.height,'height':this.options.barSize.height});

	this.randSet();
},

//鼠标按下
start:function(e){
	this.htmlDoms.msg.text('');
	this.htmlDoms.move_block.css('background-color','#337ab7');
	this.htmlDoms.left_bar.css('border-color','#337AB7');
	this.htmlDoms.icon.css('color','#fff');
	e.stopPropagation();
	this.status=true;
},
//鼠标移动
move:function(e){
	if(this.status){
	if(!e.touches){//兼容移动端
	varx=e.clientX;
	}else{//兼容PC端
	varx=e.touches[0].pageX;
	}
	varbar_area_left=Slide.prototype.getLeft(this.htmlDoms.bar_area[0]);
	varmove_block_left=x-bar_area_left;//小方块相对于父元素的left值
	if(this.options.type!=1){		//图片滑动
		if(move_block_left>=this.htmlDoms.bar_area[0].offsetWidth-parseInt(parseInt(this.options.blockSize.width)/2)-2){
		move_block_left=this.htmlDoms.bar_area[0].offsetWidth-parseInt(parseInt(this.options.blockSize.width)/2)-2;
		}
	}else{		//普通滑动
		if(move_block_left>=this.htmlDoms.bar_area[0].offsetWidth-parseInt(parseInt(this.options.barSize.height)/2)+3){
			this.$element.find('.verify-msg:eq(1)').text('松开验证');
		move_block_left=this.htmlDoms.bar_area[0].offsetWidth-parseInt(parseInt(this.options.barSize.height)/2)+3;
		}else{
			this.$element.find('.verify-msg:eq(1)').text('');
		}
	}


	if(move_block_left<=0){
		move_block_left=parseInt(parseInt(this.options.blockSize.width)/2);
	}

	//拖动后小方块的left值
	this.htmlDoms.move_block.css('left',move_block_left-parseInt(parseInt(this.options.blockSize.width)/2)+"px");
	this.htmlDoms.left_bar.css('width',move_block_left-parseInt(parseInt(this.options.blockSize.width)/2)+"px");
	}
},

//鼠标松开
end:function(){

	var_this=this;

	//判断是否重合
	if(this.status){

		if(this.options.type!=1){		//图片滑动

			varvOffset=parseInt(this.options.vOffset);
		if(parseInt(this.htmlDoms.gap.css('left'))>=(parseInt(this.htmlDoms.move_block.css('left'))-vOffset)&&parseInt(this.htmlDoms.gap.css('left'))<=(parseInt(this.htmlDoms.move_block.css('left'))+vOffset)){
			this.htmlDoms.move_block.css('background-color','#5cb85c');
			this.htmlDoms.left_bar.css({'border-color':'#5cb85c','background-color':'#fff'});
			this.htmlDoms.icon.css('color','#fff');
			this.htmlDoms.icon.removeClass('icon-right');
			this.htmlDoms.icon.addClass('icon-check');
			this.htmlDoms.refresh.hide();
			this.htmlDoms.move_block.unbind('mousedowntouchstart');
			this.options.success();
		}else{
			this.htmlDoms.move_block.css('background-color','#d9534f');
			this.htmlDoms.left_bar.css('border-color','#d9534f');
			this.htmlDoms.icon.css('color','#fff');
			this.htmlDoms.icon.removeClass('icon-right');
			this.htmlDoms.icon.addClass('icon-close');

			setTimeout(function(){
						_this.htmlDoms.move_block.animate({'left':'0px'},'fast');
						_this.htmlDoms.left_bar.animate({'width':'40px'},'fast');
						_this.htmlDoms.left_bar.css({'border-color':'#ddd'});

						_this.htmlDoms.move_block.css('background-color','#fff');
						_this.htmlDoms.icon.css('color','#000');
						_this.htmlDoms.icon.removeClass('icon-close');
				_this.htmlDoms.icon.addClass('icon-right');
				_this.$element.find('.verify-msg:eq(0)').text('向右滑动完成验证');

					},400);

			this.options.error();
		}

		}else{		//普通滑动

			if(parseInt(this.htmlDoms.move_block.css('left'))>=(parseInt(this.setSize.bar_width)-parseInt(this.options.barSize.height)-parseInt(this.options.vOffset))){
				this.htmlDoms.move_block.css('background-color','#5cb85c');
				this.htmlDoms.left_bar.css({'color':'#4cae4c','border-color':'#5cb85c','background-color':'#fff'});
				this.htmlDoms.icon.css('color','#fff');
			this.htmlDoms.icon.removeClass('icon-right');
			this.htmlDoms.icon.addClass('icon-check');
			this.htmlDoms.refresh.hide();
			this.htmlDoms.move_block.unbind('mousedown');
			this.htmlDoms.move_block.unbind('touchstart');
				this.$element.find('.verify-msg:eq(1)').text('验证成功');
				this.options.success();
			}else{

				this.htmlDoms.move_block.css('background-color','#d9534f');
			this.htmlDoms.left_bar.css('border-color','#d9534f');
			this.htmlDoms.icon.css('color','#fff');
			this.htmlDoms.icon.removeClass('icon-right');
			this.htmlDoms.icon.addClass('icon-close');

			setTimeout(function(){
						_this.htmlDoms.move_block.animate({'left':'0px'},'fast');
						_this.htmlDoms.left_bar.animate({'width':'40px'},'fast');
						_this.htmlDoms.left_bar.css({'border-color':'#ddd'});

						_this.htmlDoms.move_block.css('background-color','#fff');
						_this.htmlDoms.icon.css('color','#000');
						_this.htmlDoms.icon.removeClass('icon-close');
				_this.htmlDoms.icon.addClass('icon-right');
				_this.$element.find('.verify-msg:eq(0)').text('向右滑动解锁');

					},400);

			this.options.error();
			}
		}

	this.status=false;
	}
},


resetSize:function(obj){
	varimg_width,img_height,bar_width,bar_height;	//图片的宽度、高度，移动条的宽度、高度
	varparentWidth=obj.$element.parent().width()||$(window).width();
	varparentHeight=obj.$element.parent().height()||$(window).height();

		if(obj.options.imgSize.width.indexOf('%')!=-1){
		img_width=parseInt(obj.options.imgSize.width)/100*parentWidth+'px';
		}else{
				img_width=obj.options.imgSize.width;
			}

			if(obj.options.imgSize.height.indexOf('%')!=-1){
		img_height=parseInt(obj.options.imgSize.height)/100*parentHeight+'px';
		}else{
				img_height=obj.options.imgSize.height;
			}

			if(obj.options.barSize.width.indexOf('%')!=-1){
		bar_width=parseInt(obj.options.barSize.width)/100*parentWidth+'px';
		}else{
				bar_width=obj.options.barSize.width;
			}

			if(obj.options.barSize.height.indexOf('%')!=-1){
		bar_height=parseInt(obj.options.barSize.height)/100*parentHeight+'px';
		}else{
				bar_height=obj.options.barSize.height;
			}

			return{img_width:img_width,img_height:img_height,bar_width:bar_width,bar_height:bar_height};
	},

//随机出生点位
randSet:function(){
	varrand1=Math.floor(Math.random()*9+1);
	varrand2=Math.floor(Math.random()*9+1);
	vartop=rand1*parseInt(this.setSize.img_height)/15+parseInt(this.setSize.img_height)*0.1;
	varleft=rand2*parseInt(this.setSize.img_width)/15+parseInt(this.setSize.img_width)*0.1;

	this.$element.find('.verify-img-panel').css('margin-bottom',this.options.vSpace+'px');
	this.$element.find('.verify-gap').css({'top':top,'left':left});
	this.$element.find('.verify-sub-block').css({'top':'-'+(parseInt(this.setSize.img_height)-top+this.options.vSpace+2)+'px','background-image':'url(images/'+this.options.imgName[this.img_rand]+')','background-size':this.setSize.img_width+''+this.setSize.img_height,'background-position-y':'-'+top+'px','background-position-x':'-'+left+'px'});
},

//刷新
refresh:function(){
	this.randSet();
	this.img_rand=Math.floor(Math.random()*this.options.imgName.length);			//随机的背景图片
this.$element.find('.verify-img-panel').css({'background':'url(images/'+this.options.imgName[this.img_rand]+')','background-size':this.setSize.img_width+''+this.setSize.img_height});
this.$element.find('.verify-sub-block').css({'background-image':'url(images/'+this.options.imgName[this.img_rand]+')','background-size':this.setSize.img_width+''+this.setSize.img_height});
},

//获取left值
getLeft:function(node){
			varleft=$(node).offset().left;
//varnowPos=node.offsetParent;
//
//while(nowPos!=null){
//left+=$(nowPos).offset().left;
//nowPos=nowPos.offsetParent;
//}
returnleft;
}
};

//定义Points的构造函数
varPoints=function(ele,opt){
this.$element=ele,
this.defaults={
	defaultNum:4,	//默认的文字数量
		checkNum:3,	//校对的文字数量
		vSpace:5,	//间隔
	imgName:['1.jpg','2.jpg'],
	imgSize:{
		width:'400px',
		height:'200px',
	},
	barSize:{
		width:'400px',
		height:'40px',
	},
	ready:function(){},
	success:function(){},
error:function(){}
},
this.options=$.extend({},this.defaults,opt)
};

//定义Points的方法
Points.prototype={
	init:function(){

			var_this=this;

			//加载页面
	_this.loadDom();

	_this.refresh();
	_this.options.ready();

	this.$element[0].onselectstart=document.body.ondrag=function(){
				returnfalse;
			};

			//点击事件比对
	_this.$element.find('.verify-img-panelcanvas').on('click',function(e){

				_this.checkPosArr.push(_this.getMousePos(this,e));

				if(_this.num==_this.options.checkNum){

					_this.num=_this.createPoint(_this.getMousePos(this,e));
					setTimeout(function(){
						varflag=_this.comparePos(_this.fontPos,_this.checkPosArr);

						if(flag==false){	//验证失败

							_this.options.error();
							_this.$element.find('.verify-bar-area').css({'color':'#d9534f','border-color':'#d9534f'});
						_this.$element.find('.verify-msg').text('验证失败');

							setTimeout(function(){
								_this.$element.find('.verify-bar-area').css({'color':'#000','border-color':'#ddd'});
							_this.refresh();
						},400);

						}else{	//验证成功
							_this.$element.find('.verify-bar-area').css({'color':'#4cae4c','border-color':'#5cb85c'});
							_this.$element.find('.verify-msg').text('验证成功');
							_this.$element.find('.verify-refresh').hide();
							_this.$element.find('.verify-img-panel').unbind('click');
							_this.options.success();
						}
					},400);

				}

				if(_this.num<_this.options.checkNum){
					_this.num=_this.createPoint(_this.getMousePos(this,e));
				}

	});

	//刷新
_this.$element.find('.verify-refresh').on('click',function(){
	_this.refresh();
});

	},



	//加载页面
	loadDom:function(){

		this.fontPos=[];	//选中的坐标信息
		this.checkPosArr=[];	//用户点击的坐标
		this.num=1;	//点击的记数
		this.img_rand=Math.floor(Math.random()*this.options.imgName.length);			//随机的背景图片

	varpanelHtml='';
	vartmpHtml='';

	this.setSize=Slide.prototype.resetSize(this);	//重新设置宽度高度

	panelHtml+='';

	this.$element.append(panelHtml);


	this.htmlDoms={
		img_panel:this.$element.find('.verify-img-panel'),
		bar_area:this.$element.find('.verify-bar-area'),
		msg:this.$element.find('.verify-msg'),
	};

		this.htmlDoms.img_panel.css({'width':this.setSize.img_width,'height':this.setSize.img_height,'background-size':this.setSize.img_width+''+this.setSize.img_height,'margin-bottom':this.options.vSpace+'px'});
		this.htmlDoms.bar_area.css({'width':this.options.barSize.width,'height':this.options.barSize.height,'line-height':this.options.barSize.height});

	},

	//绘制合成的图片
	drawImg:function(obj,img){
		//准备canvas环境
		varcanvas=this.$element.find('canvas')[0];
		//varcanvas=document.getElementById("myCanvas");
		varctx=canvas.getContext("2d");

		//绘制图片
		ctx.drawImage(img,0,0,parseInt(this.setSize.img_width),parseInt(this.setSize.img_height));

		//绘制水印
		varfontSizeArr=['italicsmall-capsbold20pxmicrosoftyahei','small-capsnormal25pxarial','34pxmicrosoftyahei'];
		varfontStr='天地玄黄宇宙洪荒日月盈昃辰宿列张寒来暑往秋收冬藏闰余成岁律吕调阳云腾致雨露结为霜金生丽水玉出昆冈剑号巨阙珠称夜光果珍李柰菜重芥姜海咸河淡鳞潜羽翔龙师火帝鸟官人皇始制文字乃服衣裳推位让国有虞陶唐吊民伐罪周发殷汤坐朝问道垂拱平章爱育黎首臣伏戎羌遐迩体率宾归王';	//不重复的汉字


		varfontChars=[];

		varavg=Math.floor(parseInt(this.setSize.img_width)/(parseInt(this.options.defaultNum)+1));
		vartmp_index='';
		varcolor2Num=Math.floor(Math.random()*5);

		for(vari=1;i<=this.options.defaultNum;i++){

			fontChars[i-1]=this.getChars(fontStr,fontChars);

			tmp_index=Math.floor(Math.random()*3);
			ctx.font=fontSizeArr[tmp_index];
			ctx.fillStyle=_code_color2[color2Num];

			if(Math.floor(Math.random()*2)==1){
				vartmp_y=Math.floor(parseInt(this.setSize.img_height)/2)+tmp_index*20+20;
			}else{
				vartmp_y=Math.floor(parseInt(this.setSize.img_height)/2)-tmp_index*20;
			}

			ctx.fillText(fontChars[i-1],avg*i,tmp_y);
			this.fontPos[i-1]={'char':fontChars[i-1],'x':avg*i,'y':tmp_y};

		}

		for(vari=0;i<(this.options.defaultNum-this.options.checkNum);i++){
			this.shuffle(this.fontPos).pop();
		}

		varmsgStr='';
		for(vari=0;i0){
			tmp_rand=tmp_rand-1;
		}

		tmp_char=fontStr.charAt(tmp_rand);
		if($.inArray(tmp_char,fontChars)==-1){
			returntmp_char;
		}else{
			returnPoints.prototype.getChars(fontStr,fontChars);
		}
	},

		//洗牌数组
	shuffle:function(arr){
			varm=arr.length,i;
			while(m){
				i=(Math.random()*m--)>>>0;
				[arr[m],arr[i]]=[arr[i],arr[m]]
			}
			returnarr;
		},

	//创建坐标点
	createPoint:function(pos){
		this.htmlDoms.img_panel.append(''+this.num+'');
		return++this.num;
	},

	//比对坐标点
	comparePos:function(fontPos,checkPosArr){

		varflag=true;
		for(vari=0;ifontPos[i].x&&parseInt(checkPosArr[i].x)-40fontPos[i].y&&parseInt(checkPosArr[i].y)-40
到此这篇关于多种类型jQuery网页验证码插件代码实例的文章就介绍到这了,更多相关jQuery网页验证码插件内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
                
            
              
            
                                    上一篇
redis-benchmark并发压力测试的问题解析
                
                                    下一篇
spring-cloud-gateway动态路由的实现方法
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            初恋那件小事演员表 初恋那件小事主演演员表
                        
                                            
                            三星手机丢失如何定位找回
                        
                                            
                            荷叶粉蒸肉是哪个地方的菜 荷叶粉蒸肉做法
                        
                                            
                            什么样的书最香 脑筋急转弯大全
                        
                                            
                            云南旅游攻略自由行路线推荐 云南旅游7天自由行攻略推荐
                        
                                            
                            最美逆行者抗击疫情故事 最美逆行者抗击疫情故事2篇
                        
                                            
                            唐艺昕个人资料简介 唐艺昕出演过哪些作品
                        
                                            
                            脸宽适合什么发型 发型推荐
                        
                                            
                            金瀚演过的电视剧 金瀚演过的电视剧列述
                        
                                            
                            好听二字干净情侣 这些名字都很推荐
                        
                                            
                            哪里能做亲子鉴定
                        
                                            
                            群里拍一拍功能在哪里 微信群怎么使用拍一拍
                        
                                            
                            焚琴煮鹤的意思是什么 焚琴煮鹤的解释
                        
                                            
                            飞向别人的床歌词 飞向别人的床歌曲介绍
                        
                                            
                            独坐敬亭山的写作背景
                        
                                            
                            石嘴山旅游景点 石嘴山景点推荐
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            514930285
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2024 好资源导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图