前端：实现各样的验证码

相信我们在很多地方都能看见验证码的使用。那么如何实现验证码的功能呢？
在这里使用一个不错的 jQuery插件：verify
插件下载链接: http://www.htmleaf.com/jQuery/Form/201711064813.html

先看一下界面效果：

html代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><title>jquery验证码插件verify.js</title><link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><link rel="stylesheet" type="text/css" href="css/verify.css">
</head>
<body><div class="htmleaf-container"><header class="htmleaf-header"><h1>jquery验证码插件verify.js <span>A jQuery identifying code plugin</span></h1><div class="htmleaf-links"><a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a><a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a></div></header><div class="container"><div class="row"><div class="col-md-offset-4 col-md-4"><h3>普通验证码</h3><div id="mpanel2" ></div><button type="button" id="check-btn" class="verify-btn">确定</button></div></div><hr><div class="row"><div class="col-md-offset-4 col-md-4"><h3>数字计算验证码</h3><div id="mpanel3" style="margin-top: 20px"></div><button type="button" id="check-btn2" class="verify-btn">确定</button></div></div><hr><div class="row"><div class="col-md-offset-4 col-md-4"><h3>滑动验证码</h3><p>滑动滑块到最右侧完成验证</p><div id="mpanel1" ></div><p style="margin-top:50px;">拖动方块到空白处完成验证</p><div id="mpanel4" ></div></div></div><hr><div class="row"><div class="col-md-offset-4 col-md-4"><h3>点选验证码</h3><div id="mpanel5" style="margin-top:50px;"></div><div id="mpanel6" style="margin-top:50px;"></div></div></div></div></div><script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script><script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script><script type="text/javascript" src="js/verify.js" ></script><script type="text/javascript">$('#mpanel2').codeVerify({type : 1,width : '400px',height : '50px',fontSize : '30px',codeLength : 6,btnId : 'check-btn',ready : function() {},success : function() {alert('验证匹配！');},error : function() {alert('验证码不匹配！');}});$('#mpanel3').codeVerify({type : 2,figure : 100, //位数，仅在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 : '80%',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: '400px',height: '200px',},blockSize : {width: '40px',height: '40px',},barSize : {width : '400px',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: '600px',height: '200px',},barSize : {width : '600px',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: '600px',height: '200px',},barSize : {width : '600px',height : '40px',},ready : function() {},success : function() {alert('验证成功，添加你自己的代码！');//......后续操作},error : function() {//                  alert('验证失败！');}});</script>
</body>
</html>

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);

前端：实现各样的验证码相关推荐

前端的短信验证码如何做（和后端配合）
前言阅读本篇文章的要求:懂前端的HTML,CSS,Javascript,ajax:后端的php(或者其它编程语言也行)懂一点,数据库. 这篇文章写了四个小时,希望大家怀着一颗感恩的心阅读,谢谢!感谢 ...
前端Vue实现手机号验证码登录（60s禁用倒计时）
这篇文章主要介绍了Vue实现手机号验证码登录(60s禁用倒计时),帮助大家更好的理解和使用vue,具有很好的参考价值,感兴趣的朋友可以了解下最近做了个vue项目,前端通过手机号验证码的方式登录,获取 ...
js+css实现验证码框,前端实现6位验证码输入框效果
这个验证码输入应用场景非常的多,看起来很简单的,但是做起来还是有一些坑. 首先的想法就是6个input框,每输入一个数字之后,切换到下一个input,即切换focus,如果输入很快的话,会导致切换不过 ...
html前端通过canvas生成验证码
1.页面调用js文件 <script type="text/javascript" src="js/jquery-1.11.3.js"></s ...
前端动态生成随机图形验证码
图形验证码示例图 <template><view class="dis-flex"><view style="margin-top: 8px ...
vue项目web前端登录页数字验证码登录流程
1.创建code.js文件夹下面是js代码 function GVerify(options) {console.log(); // 创建一个图形验证码对象,接收options对象为参数this.co ...
Java中使用Base64进行编码解码的工具类-将验证码图片使用Base64编码并返回给前端
场景前端使用Vue,验证码图片的src属性来自于后台SpringBoot接口. 后台验证码接口生成验证码图片并将其使用Base64进行编码. 前端就可以直接使用 data:image/png;bas ...
前端验证码与后端验证码
最近在搭建项目的登录界面,有一个验证码模块,like this 搜了一些教程是在前端实现的,就在我准备比着写的时候,看到一条留言"这样的验证码只能防人,不能防机器". 所以,我就转 ...
【SDU项目实训2019级】前端和后端实现手机短信验证码登录和注册功能
目录 1.前端登录页面手机号验证码登录页面: 2.前端获取验证码的函数: 3.后端获取验证码代码 4.前端登录的函数: 5.后端登录的实现 6.注册功能前后端的实现 1.前端登录页面手机号验证码登录页 ...

前端：实现各样的验证码

前端：实现各样的验证码相关推荐

最新文章

热门文章