/*! verify-v0.1.1 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.isend = false;
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() {
if(this.isend == false) {
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.isend = true;
this.options.success(this);
}else {
this.options.error(this);
this.setcode();
}
},
//刷新
refresh : function() {
this.isend = false;
this.$element.find('.verify-code').click();
}
};
//定义slide的构造函数
var slide = function(ele, opt) {
this.$element = ele,
this.defaults = {
type : 1,
mode : 'fixed', //弹出式pop,固定fixed
voffset: 5,
vspace : 5,
explain : '向右滑动完成验证',
imgurl : 'images/',
imgname : ['1.jpg', '2.jpg'],
imgsize : {
width: '400px',
height: '200px',
},
blocksize : {
width: '50px',
height: '50px',
},
circleradius: '10px',
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.refresh();
this.options.ready();
this.$element[0].onselectstart = document.body.ondrag = function(){
return false;
};
if(this.options.mode == 'pop') {
this.$element.on('mouseover', function(e){
_this.showimg();
});
this.$element.on('mouseout', function(e){
_this.hideimg();
});
this.htmldoms.out_panel.on('mouseover', function(e){
_this.showimg();
});
this.htmldoms.out_panel.on('mouseout', function(e){
_this.hideimg();
});
}
//按下
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); //随机的背景图片
this.status = false; //鼠标状态
this.isend = false; //是够验证完成
this.setsize = this.resetsize(this); //重新设置宽度高度
this.pluswidth = 0;
this.plusheight = 0;
this.x = 0;
this.y = 0;
var panelhtml = '';
var tmphtml = '';
this.lengthpercent = (parseint(this.setsize.img_width)-parseint(this.setsize.block_width)- parseint(this.setsize.circle_radius) - parseint(this.setsize.circle_radius) * 0.8)/(parseint(this.setsize.img_width)-parseint(this.setsize.bar_height));
if(this.options.type != 1) { //图片滑动
panelhtml += '';
this.pluswidth = parseint(this.setsize.block_width) + parseint(this.setsize.circle_radius) * 2 - parseint(this.setsize.circle_radius) * 0.2;
this.plusheight = parseint(this.setsize.block_height) + parseint(this.setsize.circle_radius) * 2 - parseint(this.setsize.circle_radius) * 0.2;
tmphtml = '';
}
panelhtml += tmphtml+'';
this.$element.append(panelhtml);
this.htmldoms = {
sub_block : this.$element.find('.verify-sub-block'),
out_panel : this.$element.find('.verify-img-out'),
img_panel : this.$element.find('.verify-img-panel'),
img_canvas : this.$element.find('.verify-img-canvas'),
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.$element.css('position', 'relative');
if(this.options.mode == 'pop') {
this.htmldoms.out_panel.css({'display': 'none', 'position': 'absolute', 'bottom': '42px'});
this.htmldoms.sub_block.css({'display': 'none'});
}else {
this.htmldoms.out_panel.css({'position': 'relative'});
}
this.htmldoms.out_panel.css('height', parseint(this.setsize.img_height) + this.options.vspace + 'px');
this.htmldoms.img_panel.css({'width': this.setsize.img_width, 'height': this.setsize.img_height});
this.htmldoms.bar_area.css({'width': this.setsize.bar_width, 'height': this.setsize.bar_height, 'line-height':this.setsize.bar_height});
this.htmldoms.move_block.css({'width': this.setsize.bar_height, 'height': this.setsize.bar_height});
this.htmldoms.left_bar.css({'width': this.setsize.bar_height, 'height': this.setsize.bar_height});
this.randset();
},
drawimg: function(obj, img) {
var canvas = this.htmldoms.img_canvas[0];
if(canvas) {
var ctx=canvas.getcontext("2d");
ctx.drawimage(img,0,0, parseint(this.setsize.img_width), parseint(this.setsize.img_height));
graphparameter = {
x : this.x,
y : this.y,
r : parseint(this.setsize.circle_radius),
w : (parseint(this.setsize.block_width) - 2 * parseint(this.setsize.circle_radius)) / 2,
h : (parseint(this.setsize.block_height) - 2 * parseint(this.setsize.circle_radius)) / 2
};
obj.drawrule(ctx, graphparameter);
}
var canvas2 = this.htmldoms.sub_block[0];
if(canvas2) {
var proportionx = img.width/parseint(this.setsize.img_width);
var proportiony = img.height/parseint(this.setsize.img_height);
var ctx2=canvas2.getcontext("2d");
ctx2.restore();
ctx2.drawimage(img,this.x * proportionx, (this.y - parseint(this.setsize.circle_radius) - parseint(this.setsize.circle_radius) * 0.8) * proportiony,this.pluswidth * proportionx,this.plusheight * proportiony,0,0,this.pluswidth,this.plusheight);
ctx2.save();
ctx2.globalcompositeoperation = "destination-atop";
graphparameter.x = 0;
graphparameter.y = parseint(this.setsize.circle_radius) + parseint(this.setsize.circle_radius) * 0.8;
obj.drawrule(ctx2, graphparameter);
}
},
drawrule:function(ctx, graphparameter) {
var x = graphparameter.x;
var y = graphparameter.y;
var r = graphparameter.r
var w = graphparameter.w
var h = graphparameter.h
ctx.beginpath();
ctx.moveto(x, y);
ctx.lineto((x + w) + r * 0.4, y);
ctx.arc((x + w) + r, y - r * 0.8, r, 0.7 * math.pi, 0.3 * math.pi);
ctx.lineto((x + (2 * w) + (2 * r)), y);
ctx.lineto((x + (2 * w) + (2 * r)), y + h);
ctx.arc((x + (2 * w) + (2 * r)) + (r * 0.8), y + h + r, r, 1.2*math.pi, 0.8*math.pi);
ctx.lineto((x + (2 * w) + (2 * r)), y + (2 * h) + (2 * r));
ctx.lineto(x, y + (2 * h) + (2 * r));
ctx.lineto(x, y + h + 2 * r - r * 0.4);
ctx.arc(x + (r * 0.8), y + h + r, r, 0.8 * math.pi, 1.2 * math.pi, true);
ctx.lineto(x, y);
ctx.fillstyle="#fff";
ctx.fill();
ctx.closepath();
},
//鼠标按下
start: function(e) {
if(this.isend == false) {
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 && this.isend == false) {
if(this.options.mode == 'pop') {
this.showimg();
}
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(this.setsize.bar_height) + parseint(parseint(this.setsize.block_width)/2) - 2) ) {
move_block_left = (this.htmldoms.bar_area[0].offsetwidth - parseint(this.setsize.bar_height) + parseint(parseint(this.setsize.block_width)/2)- 2);
}
}else { //普通滑动
if(move_block_left >= this.htmldoms.bar_area[0].offsetwidth - parseint(parseint(this.setsize.bar_height)/2) + 3) {
this.$element.find('.verify-msg:eq(1)').text('松开验证');
move_block_left = this.htmldoms.bar_area[0].offsetwidth - parseint(parseint(this.setsize.bar_height)/2) + 3;
}else {
this.$element.find('.verify-msg:eq(1)').text('');
}
}
if(move_block_left <= parseint(parseint(this.setsize.block_width)/2)) {
move_block_left = parseint(parseint(this.setsize.block_width)/2);
}
//拖动后小方块的left值
this.htmldoms.move_block.css('left', move_block_left-parseint(parseint(this.setsize.block_width)/2) + "px");
this.htmldoms.left_bar.css('width', move_block_left-parseint(parseint(this.setsize.block_width)/2) + "px");
this.htmldoms.sub_block.css('left', (move_block_left-parseint(parseint(this.setsize.block_width)/2)) * this.lengthpercent + "px");
}
},
//鼠标松开
end: function() {
var _this = this;
//判断是否重合
if(this.status && this.isend == false) {
if(this.options.type != 1) { //图片滑动
var voffset = parseint(this.options.voffset);
if(parseint(this.x) >= (parseint(this.htmldoms.sub_block.css('left')) - voffset) && parseint(this.x) <= (parseint(this.htmldoms.sub_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.isend = true;
this.options.success(this);
}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.refresh();
}, 400);
this.options.error(this);
}
}else { //普通滑动
if(parseint(this.htmldoms.move_block.css('left')) >= (parseint(this.setsize.bar_width) - parseint(this.setsize.bar_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.$element.find('.verify-msg:eq(1)').text('验证成功');
this.isend = true;
this.options.success(this);
}else {
this.$element.find('.verify-msg:eq(1)').text('');
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');
this.isend = true;
settimeout(function () {
_this.$element.find('.verify-msg:eq(1)').text('');
_this.refresh();
_this.isend = false;
}, 400);
this.options.error(this);
}
}
this.status = false;
}
},
//弹出式
showimg : function() {
this.htmldoms.out_panel.css({'display': 'block'});
this.htmldoms.sub_block.css({'display': 'block'});
},
//固定式
hideimg : function() {
this.htmldoms.out_panel.css({'display': 'none'});
this.htmldoms.sub_block.css({'display': 'none'});
},
resetsize : function(obj) {
var img_width,img_height,bar_width,bar_height,block_width,block_height,circle_radius; //图片的宽度、高度,移动条的宽度、高度
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;
}
if(obj.options.blocksize) {
if(obj.options.blocksize.width.indexof('%')!= -1){
block_width = parseint(obj.options.blocksize.width)/100 * parentwidth + 'px';
}else {
block_width = obj.options.blocksize.width;
}
if(obj.options.blocksize.height.indexof('%')!= -1){
block_height = parseint(obj.options.blocksize.height)/100 * parentheight + 'px';
}else {
block_height = obj.options.blocksize.height;
}
}
if(obj.options.circleradius) {
if(obj.options.circleradius.indexof('%')!= -1){
circle_radius = parseint(obj.options.circleradius)/100 * parentheight + 'px';
}else {
circle_radius = obj.options.circleradius;
}
}
return {img_width : img_width, img_height : img_height, bar_width : bar_width, bar_height : bar_height, block_width : block_width, block_height : block_height, circle_radius : circle_radius};
},
//随机出生点位
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.x = left;
this.y = top;
if(this.options.mode == 'pop') {
this.htmldoms.sub_block.css({'top': '-'+(parseint(this.setsize.img_height) + this.options.vspace + parseint(this.setsize.circle_radius) + parseint(this.setsize.circle_radius) * 0.8 - this.y - 2) +'px'});
}else {
this.htmldoms.sub_block.css({'top': this.y - (parseint(this.setsize.circle_radius) + parseint(this.setsize.circle_radius) * 0.8) + 2 + 'px'});
}
},
//刷新
refresh: function() {
var _this = this;
this.htmldoms.refresh.show();
this.$element.find('.verify-msg:eq(1)').text('');
this.$element.find('.verify-msg:eq(1)').css('color', '#000');
this.htmldoms.move_block.animate({'left':'0px'}, 'fast');
this.htmldoms.left_bar.animate({'width': parseint(this.setsize.bar_height)}, '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(this.options.explain);
this.randset();
this.img_rand = math.floor(math.random() * this.options.imgname.length); //随机的背景图片
var img = new image();
//img.src = this.options.imgurl + this.options.imgname[this.img_rand];
//自定义验证码的图片路径
img.src = verifypath + this.options.imgname[this.img_rand];
// 加载完成开始绘制
$(img).on('load', function(e) {
_this.drawimg(_this, this);
});
this.isend = false;
this.htmldoms.sub_block.css('left', "0px");
},
//获取left值
getleft: function(node) {
var left = $(node).offset().left;
// var left = 0;
// 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 = {
mode : 'fixed', //弹出式pop,固定fixed
defaultnum : 4, //默认的文字数量
checknum : 3, //校对的文字数量
vspace : 5, //间隔
imgurl : 'images/',
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;
};
if(this.options.mode == 'pop') {
this.$element.on('mouseover', function(e){
_this.showimg();
});
this.$element.on('mouseout', function(e){
_this.hideimg();
});
this.htmldoms.out_panel.on('mouseover', function(e){
_this.showimg();
});
this.htmldoms.out_panel.on('mouseout', function(e){
_this.hideimg();
});
}
//点击事件比对
_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);
_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(_this);
}
}, 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 = {
out_panel : this.$element.find('.verify-img-out'),
img_panel : this.$element.find('.verify-img-panel'),
bar_area : this.$element.find('.verify-bar-area'),
msg : this.$element.find('.verify-msg'),
};
this.$element.css('position', 'relative');
if(this.options.mode == 'pop') {
this.htmldoms.out_panel.css({'display': 'none', 'position': 'absolute', 'bottom': '42px'});
}else {
this.htmldoms.out_panel.css({'position': 'relative'});
}
this.htmldoms.out_panel.css('height', parseint(this.setsize.img_height) + this.options.vspace + 'px');
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.setsize.bar_height, 'line-height':this.setsize.bar_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;
var tmpf;
while (m) {
i = (math.random() * m--) >>> 0;
tmpf = arr[m];
arr[m] = arr[i];
arr[i] = tmpf;
//[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;
},
//弹出式
showimg : function() {
this.htmldoms.out_panel.css({'display': 'block'});
},
//固定式
hideimg : function() {
this.htmldoms.out_panel.css({'display': 'none'});
},
//刷新
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 = this.options.imgurl +this.options.imgname[this.img_rand];
//自定义验证码的图片路径
img.src = verifypath + this.options.imgname[this.img_rand];
// 加载完成开始绘制
$(img).on('load', function(e) {
this.fontpos = _this.drawimg(_this, this);
});
_this.$element.find('.verify-bar-area').css({'color': '#000', 'border-color': '#ddd'});
_this.$element.find('.verify-msg').text('验证失败');
_this.$element.find('.verify-refresh').show();
},
};
//在插件中使用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);