首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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

Posted in jQuery onJanuary 09, 2021

html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>jQuery网页验证码插件</title>
<link rel="stylesheet" type="text/css" href="css/verify.css" rel="external nofollow" >
</head>
<body>
<h3>数字字母验证码</h3>
<div id="mpanel2" ></div>
<button type="button" id="check-btn" class="verify-btn">确定</button>
<h3 style="margin-top: 20px">算数验证码</h3>
<div id="mpanel3"></div>
<button type="button" id="check-btn2" class="verify-btn">确定</button>
 
<h3 style="margin-top: 20px">滑动验证码</h3>
<div id="mpanel1" ></div>
 
<h3 style="margin-top: 20px">拼图验证码</h3>
<div id="mpanel4"></div>
 
<h3 style="margin-top:30px;">点选验证码</h3>
<div id="mpanel5">
</div>
<div id="mpanel6" style="margin-top:30px;">
</div>
 
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/verify.js" ></script>
<script type="text/javascript">
	$('#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('验证失败！');
		}
	});
 
</script>
 
</body>
</html>

verify.css

/*常规验证码*/
.verify-code {
	font-size: 20px;
	text-align: center;
	cursor: pointer;
	margin-bottom: 5px;
	border: 1px solid #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: 1px solid #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: 0 0 2px #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: 1px solid #ddd;
}
 
.verify-img-panel {
	margin:0;
	-webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
	border: 1px solid #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:1px solid #fff;
}
 
.verify-bar-area .verify-move-block .verify-sub-block {
	position: absolute;
 text-align: center;
	z-index: 3;
	border: 1px solid #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,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') format('woff'),
 url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); /* iOS 4.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.0 MIT License by 大熊*/
 
;(function($, window, document,undefined) {
 
	//定义Code的构造函数
 var Code = 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(){
				return false;
			};
			//点击验证码
			this.$element.find('.verify-code, .verify-change-code').on('click', function() {
				_this.setCode();
			});
			//确定的点击事件
			this.htmlDoms.code_btn.on('click', function() {
				_this.checkCode();
			});
 	},
 
 	//加载页面
 	loadDom : function() {
 		var panelHtml = '<div class="cerify-code-panel">\
  <div class="verify-code"></div>\
  <div class="verify-code-area">\
   <div class="verify-input-area">\
   <input type="text" class="varify-input-code"/>\
   </div>\
   <div class="verify-change-area">\
   <a class="verify-change-code">换一张</a>\
   </div>\
  </div>\
  </div>';
 	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() {
 		var color1Num = Math.floor(Math.random() * 3);
 		var color2Num = Math.floor(Math.random() * 5);
 
 		this.htmlDoms.code.css({'background-color': _code_color1[color1Num], 'color': _code_color2[color2Num]});
 		this.htmlDoms.code_input.val('');
 
 		var code = '';
 		this.code_chose = '';
 
 		if(this.options.type == 1) {	//普通验证码
				for(var i = 0; i < this.options.codeLength; i++) {
					var charNum = Math.floor(Math.random() * 52);
					var tmpStyle = (charNum%2 ==0)? "font-style:italic;margin-right: 10px;":"font-weight:bolder;";
					tmpStyle += (Math.floor(Math.random() * 2) == 1)? "font-weight:bolder;":"";
					this.code_chose += _code_chars[charNum];
					code += '<font style="'+tmpStyle+'">'+_code_chars[charNum]+'</font>';
				}
 		}else {		//算法验证码
 			var num1 = Math.floor(Math.random() * this.options.figure);
 			var num2 = Math.floor(Math.random() * this.options.figure);
 
 			if(this.options.arith == 0) {
 				var tmparith = Math.floor(Math.random() * 3);
 			}
 
 			switch(tmparith) {
 				case 1 :
 					this.code_chose = parseInt(num1) + parseInt(num2);
 					code = num1 + ' + ' + num2 + ' = ?';
 					break;
 				case 2 :
 					if(parseInt(num1) < parseInt(num2)) {
 						var tmpnum = num1;
 						num1 = num2;
 						num2 = tmpnum;
 					}
 					this.code_chose = parseInt(num1) - parseInt(num2);
 					code = num1 + ' - ' + num2 + ' = ?';
 					break;
 				default :
 					this.code_chose = parseInt(num1) * parseInt(num2);
 					code = num1 + ' × ' + num2 + ' = ?';
 					break;
 			}
 		}
 
 		this.htmlDoms.code.html(code);
 
 	},
 
 	//比对验证码
 	checkCode : function() {
 		if(this.options.type == 1) {		//普通验证码
 			var own_input = this.htmlDoms.code_input.val().toUpperCase();
 			this.code_chose = this.code_chose.toUpperCase();
 		}else {
 			var own_input = this.htmlDoms.code_input.val();
 		}
 
 		if(own_input == this.code_chose) {
 			this.options.success();
 		}else {
 			this.options.error();
 			this.setCode();
 		}
 	}
 };
 
 
 //定义Slide的构造函数
 var Slide = function(ele, opt) {
 this.$element = ele,
 this.defaults = {
 
 	type : 1,
 	vOffset: 5,
  vSpace : 5,
  imgName : ['1.jpg', '2.jpg'],
  imgSize : {
	 	width: '400px',
	 	height: '200px',
	 },
	 blockSize : {
	 	width: '50px',
	 	height: '50px',
	 },
	 barSize : {
	 	width : '400px',
	 	height : '40px',
	 },
  ready : function(){},
 	success : function(){},
  error : function(){}
 
 },
 this.options = $.extend({}, this.defaults, opt)
 };
 
 
 //定义Slide的方法
 Slide.prototype = {
 
 init: function() {
 	var _this = this;
 
 	//加载页面
 	this.loadDom();
 	this.options.ready();
 
 	this.$element[0].onselectstart = document.body.ondrag = function(){
				return false;
			};
 
 	//按下
 	this.htmlDoms.move_block.on('touchstart', function(e) {
 		_this.start(e);
 	});
 
 	this.htmlDoms.move_block.on('mousedown', function(e) {
 		_this.start(e);
 	});
 
 	//拖动
  window.addEventListener("touchmove", function(e) {
  	_this.move(e);
  });
  window.addEventListener("mousemove", function(e) {
  	_this.move(e);
  });
 
  //鼠标松开
  window.addEventListener("touchend", function() {
  	_this.end();
  });
  window.addEventListener("mouseup", function() {
  	_this.end();
  });
 
  //刷新
  _this.$element.find('.verify-refresh').on('click', function() {
  	_this.refresh();
  });
 },
 
 //初始化加载
 loadDom : function() {
 	this.img_rand = Math.floor(Math.random() * this.options.imgName.length);			//随机的背景图片
 
 	var panelHtml = '';
 	var tmpHtml = '';
 
 	if(this.options.type != 1) {		//图片滑动
 		panelHtml += '<div class="verify-img-panel">\
  <div class="verify-refresh">\
   <i class="iconfont icon-refresh"></i>\
  </div>\
   <div class="verify-gap"></div>\
  </div>';
 		tmpHtml = '<div class="verify-sub-block"></div>';
 	}
 
 	panelHtml += '<div class="verify-bar-area">\
  <span class="verify-msg">向右滑动完成验证</span>\
  <div class="verify-left-bar">\
  <span class="verify-msg"></span>\
  <div class="verify-move-block">\
  <i class="verify-icon iconfont icon-right"></i>'+tmpHtml+'</div></div></div>';
 	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) { //兼容移动端
	  var x = e.clientX;
	  }else { //兼容PC端
	  var x = e.touches[0].pageX;
	  }
	  var bar_area_left = Slide.prototype.getLeft(this.htmlDoms.bar_area[0]);
	  var move_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) {		//图片滑动
 
 			var vOffset = 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('mousedown touchstart');
		  	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) {
 	var img_width,img_height,bar_width,bar_height;	//图片的宽度、高度，移动条的宽度、高度
 	var parentWidth = obj.$element.parent().width() || $(window).width();
 	var parentHeight = 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() {
 	var rand1 = Math.floor(Math.random()*9+1);
 	var rand2 = Math.floor(Math.random()*9+1);
 	var top = rand1 * parseInt(this.setSize.img_height)/15 + parseInt(this.setSize.img_height) * 0.1;
 	var left = 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) {
			var left = $(node).offset().left;
//  var nowPos = node.offsetParent;
//
//  while(nowPos != null) {

//  left += $(nowPos).offset().left;　
//  nowPos = nowPos.offsetParent;

//  }
  return left;
 }
 };
 
 //定义Points的构造函数
 var Points = 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(){
				return false;
			};
 
		 	//点击事件比对
 	_this.$element.find('.verify-img-panel canvas').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 () {
						var flag = _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);			//随机的背景图片
 
 	var panelHtml = '';
 	var tmpHtml = '';
 
 	this.setSize = Slide.prototype.resetSize(this);	//重新设置宽度高度
 
 	panelHtml += '<div class="verify-img-panel"><div class="verify-refresh" style="z-index:9999"><i class="iconfont icon-refresh"></i></div><canvas width="'+this.setSize.img_width+'" height="'+this.setSize.img_height+'"></canvas></div><div class="verify-bar-area"><span class="verify-msg"></span></div>';
 
 	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环境
	 	var canvas = this.$element.find('canvas')[0];
	 	//var canvas=document.getElementById("myCanvas");
	 	var ctx=canvas.getContext("2d");
 
	 	// 绘制图片
	 	ctx.drawImage(img,0,0, parseInt(this.setSize.img_width), parseInt(this.setSize.img_height));
 
	 	// 绘制水印
	 	var fontSizeArr = ['italic small-caps bold 20px microsoft yahei', 'small-caps normal 25px arial', '34px microsoft yahei'];
	 	var fontStr = '天地玄黄宇宙洪荒日月盈昃辰宿列张寒来暑往秋收冬藏闰余成岁律吕调阳云腾致雨露结为霜金生丽水玉出昆冈剑号巨阙珠称夜光果珍李柰菜重芥姜海咸河淡鳞潜羽翔龙师火帝鸟官人皇始制文字乃服衣裳推位让国有虞陶唐吊民伐罪周发殷汤坐朝问道垂拱平章爱育黎首臣伏戎羌遐迩体率宾归王';	//不重复的汉字
 
 
	 	var fontChars = [];
 
	 	var avg = Math.floor(parseInt(this.setSize.img_width)/(parseInt(this.options.defaultNum)+1));
	 	var tmp_index = '';
	 	var color2Num = Math.floor(Math.random() * 5);
 
	 	for(var i = 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) {
		 		var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) + tmp_index*20 + 20;
		 	}else {
		 		var tmp_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(var i = 0; i < (this.options.defaultNum-this.options.checkNum); i++) {
	 		this.shuffle(this.fontPos).pop();
	 	}
 
	 	var msgStr = '';
	 	for(var i = 0; i < this.fontPos.length; i++) {
	 		msgStr += this.fontPos[i].char + ',';
	 	}
 
	 	this.htmlDoms.msg.text('请顺序点击【' + msgStr.substring(0,msgStr.length-1) + '】');
 
	 	return this.fontPos;
 	},
 
 	//获取坐标
 	getMousePos :function(obj, event) {
  var e = event || window.event;
  var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
  var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
  var x = e.clientX - ($(obj).offset().left - $(window).scrollLeft());
 		var y = e.clientY - ($(obj).offset().top - $(window).scrollTop());
 
  return {'x': x, 'y': y};
 	},
 
 	//递归去重
 	getChars : function(fontStr, fontChars) {
 
 		var tmp_rand = parseInt(Math.floor(Math.random() * fontStr.length));
 		if(tmp_rand > 0) {
 			tmp_rand = tmp_rand - 1;
 		}
 
 		tmp_char = fontStr.charAt(tmp_rand);
 		if($.inArray(tmp_char, fontChars) == -1) {
 			return tmp_char;
 		}else {
 			return Points.prototype.getChars(fontStr, fontChars);
 		}
 	},
 
		//洗牌数组
 	shuffle : function(arr) {
			var m = arr.length, i;
			while (m) {
				i = (Math.random() * m--) >>> 0;
				[arr[m], arr[i]] = [arr[i], arr[m]]
			}
			return arr;
		},
 
 	//创建坐标点
 	createPoint : function (pos) {
 		this.htmlDoms.img_panel.append('<div class="point-area" style="background-color:#1abd6c;color:#fff;z-index:9999;width:30px;height:30px;text-align:center;line-height:30px;border-radius: 50%;position:absolute;top:'+parseInt(pos.y-10)+'px;left:'+parseInt(pos.x-10)+'px;">'+this.num+'</div>');
 		return ++this.num;
 	},
 
 	//比对坐标点
 	comparePos : function (fontPos, checkPosArr) {
 
 		var flag = true;
 		for(var i = 0; i < fontPos.length; i++) {
 			if(!(parseInt(checkPosArr[i].x) + 40 > fontPos[i].x && parseInt(checkPosArr[i].x) - 40 < fontPos[i].x && parseInt(checkPosArr[i].y) + 40 > fontPos[i].y && parseInt(checkPosArr[i].y) - 40 < fontPos[i].y)) {
 				flag = false;
 				break;
 			}
 		}
 
 		return flag;
 	},
 
 	//刷新
 refresh: function() {
 	var _this = this;
 	this.$element.find('.point-area').remove();
 	this.fontPos = [];
 	this.checkPosArr = [];
 	this.num = 1;
 
 	this.img_rand = Math.floor(Math.random() * this.options.imgName.length);			//随机的背景图片
 	var img = new Image();
		 img.src = 'images/'+this.options.imgName[this.img_rand];
 
 
		 	// 加载完成开始绘制
		 	$(img).on('load', function(e) {
 		this.fontPos = _this.drawImg(_this, this);
 	});
 
 },
 
 };
 
 //在插件中使用codeVerify对象
 $.fn.codeVerify = function(options, callbacks) {
 var code = new Code(this, options);
 code.init();
 };
 
 //在插件中使用slideVerify对象
 $.fn.slideVerify = function(options, callbacks) {
 var slide = new Slide(this, options);
 slide.init();
 };
 
 //在插件中使用clickVerify对象
 $.fn.pointsVerify = function(options, callbacks) {
 var points = new Points(this, options);
 points.init();
 };
 
})(jQuery, window, document);

到此这篇关于多种类型jQuery网页验证码插件代码实例的文章就介绍到这了,更多相关jQuery网页验证码插件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

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

- Author -

lucky芬

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jquery仿微信聊天界面
May 06 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
使用jquery实现轮播图效果
Jan 02 #jQuery
jQuery实现全选按钮
Jan 01 #jQuery
jquery自定义组件实例详解
Dec 31 #jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 #jQuery
JS实现选项卡插件的两种写法（jQuery和class）
Dec 30 #jQuery
jQuery实现简单轮播图效果
Dec 27 #jQuery
原生jQuery实现只显示年份下拉框
Dec 24 #jQuery
explain(2) 巫师(1) 西索(1) 守望先锋(1) 城市猎人(1) 帝国时代(1) AngularJS(2) 波段(1) 最终幻想(1) Docker(14)
You might like
如何去掉文章里的 html 语法
2006/10/09 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
JavaScript修改css样式style
2008/04/15 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
JS提示：Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
Python转换时间的图文方法
2019/07/01 Python
Python之修改图片像素值的方法
2019/07/03 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
python如何编写win程序
2020/06/08 Python
Python turtle库的画笔控制说明
2020/06/28 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
Java程序员常见面试题
2015/07/16 面试题
医学生求职信
2014/07/01 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis