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

最新推荐文章于 2021-06-28 08:47:28 发布

weixin_39678531

最新推荐文章于 2021-06-28 08:47:28 发布

阅读量503

点赞数

文章标签： html 验证码插件

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: 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 = '

换一张\

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 += ''+_code_chars[charNum]+'';

}

}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 += '

tmpHtml = '

}

panelHtml += '

向右滑动完成验证\

'+tmpHtml+'

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 += '

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('

'+this.num+'

');

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);//随机的背景图片