首页
所有分类
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实现图片平滑滚动详解
Mar 22 jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery操作css样式
May 15 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
jQuery实现回到顶部效果
Oct 19 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
聘任书(31) 承诺书(369) 决心书(42) 建议书(203) 倡议书(159) 请假条(31) 广告词(105) 活动总结(790) 责任书(145) 主持词(345)
You might like
PHP注释实例技巧
2008/10/03 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
Python异常的检测和处理方法
2018/10/26 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
将python安装信息加入注册表的示例
2019/11/20 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
python解释器安装教程的方法步骤
2020/07/02 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
CSS3 特效范例整理
2011/08/22 HTML / CSS
美国顶级品牌男士大码服装店：DXL
2017/08/30 全球购物
先进个人获奖感言
2014/01/24 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
复活读书笔记
2015/06/29 职场文书