• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
阿阳937 显示全部楼层 发表于 2021-10-25 19:25:39 |阅读模式 打印 上一主题 下一主题
html
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  6. <title>jQuery网页验证码插件</title>
  7. <link rel="stylesheet" type="text/css" href="css/verify.css" rel="external nofollow" >
  8. </head>
  9. <body>
  10. <h3>数字字母验证码</h3>
  11. <div id="mpanel2" ></div>
  12. <button type="button" id="check-btn" class="verify-btn">确定</button>
  13. <h3 style="margin-top: 20px">算数验证码</h3>
  14. <div id="mpanel3"></div>
  15. <button type="button" id="check-btn2" class="verify-btn">确定</button>
  16. <h3 style="margin-top: 20px">滑动验证码</h3>
  17. <div id="mpanel1" ></div>
  18. <h3 style="margin-top: 20px">拼图验证码</h3>
  19. <div id="mpanel4"></div>
  20. <h3 style="margin-top:30px;">点选验证码</h3>
  21. <div id="mpanel5">
  22. </div>
  23. <div id="mpanel6" style="margin-top:30px;">
  24. </div>
  25. <script type="text/javascript" src="js/jquery.min.js"></script>
  26. <script type="text/javascript" src="js/verify.js" ></script>
  27. <script type="text/javascript">
  28.         $('#mpanel2').codeVerify({
  29.                 type : 1,
  30.                 width : '200px',
  31.                 height : '50px',
  32.                 fontSize : '30px',
  33.                 codeLength : 6,
  34.                 btnId : 'check-btn',
  35.                 ready : function() {
  36.                 },
  37.                 success : function() {
  38.                         alert('验证匹配!');
  39.                 },
  40.                 error : function() {
  41.                         alert('验证码不匹配!');
  42.                 }
  43.         });
  44.         $('#mpanel3').codeVerify({
  45.                 type : 2,
  46.                 figure : 50,        //位数,仅在type=2时生效
  47.                 arith : 0,        //算法,支持加减乘,不填为随机,仅在type=2时生效
  48.                 width : '200px',
  49.                 height : '50px',
  50.                 fontSize : '30px',
  51.                 btnId : 'check-btn2',
  52.                 ready : function() {
  53.                 },
  54.                 success : function() {
  55.                         alert('验证匹配!');
  56.                 },
  57.                 error : function() {
  58.                         alert('验证码不匹配!');
  59.                 }
  60.         });
  61.         $('#mpanel1').slideVerify({
  62.                 type : 1,                //类型
  63.                 vOffset : 5,        //误差量,根据需求自行调整
  64.                 barSize : {
  65.                         width : '50%',
  66.                         height : '40px',
  67.                 },
  68.                 ready : function() {
  69.                 },
  70.                 success : function() {
  71.                         alert('验证成功,添加你自己的代码!');
  72.                         //......后续操作
  73.                 },
  74.                 error : function() {
  75. //                 alert('验证失败!');
  76.                 }
  77.         });
  78.         $('#mpanel4').slideVerify({
  79.                 type : 2,                //类型
  80.                 vOffset : 5,        //误差量,根据需求自行调整
  81.                 vSpace : 5,        //间隔
  82.                 imgName : ['1.jpg', '2.jpg'],
  83.                 imgSize : {
  84.                         width: '300px',
  85.                         height: '200px',
  86.                 },
  87.                 blockSize : {
  88.                         width: '40px',
  89.                         height: '40px',
  90.                 },
  91.                 barSize : {
  92.                         width : '300px',
  93.                         height : '40px',
  94.                 },
  95.                 ready : function() {
  96.                 },
  97.                 success : function() {
  98.                         alert('验证成功,添加你自己的代码!');
  99.                         //......后续操作
  100.                 },
  101.                 error : function() {
  102. //                         alert('验证失败!');
  103.                 }
  104.         });
  105.         $('#mpanel5').pointsVerify({
  106.                 defaultNum : 4,        //默认的文字数量
  107.                 checkNum : 2,        //校对的文字数量
  108.                 vSpace : 5,        //间隔
  109.                 imgName : ['1.jpg', '2.jpg'],
  110.                 imgSize : {
  111.                         width: '400px',
  112.                         height: '200px',
  113.                 },
  114.                 barSize : {
  115.                         width : '400px',
  116.                         height : '40px',
  117.                 },
  118.                 ready : function() {
  119.                 },
  120.                 success : function() {
  121.                         alert('验证成功,添加你自己的代码!');
  122.                         //......后续操作
  123.                 },
  124.                 error : function() {
  125. //                         alert('验证失败!');
  126.                 }
  127.         });
  128.         $('#mpanel6').pointsVerify({
  129.                 defaultNum : 4,        //默认的文字数量
  130.                 checkNum : 2,        //校对的文字数量
  131.                 vSpace : 5,        //间隔
  132.                 imgName : ['1.jpg', '2.jpg'],
  133.                 imgSize : {
  134.                         width: '400px',
  135.                         height: '200px',
  136.                 },
  137.                 barSize : {
  138.                         width : '400px',
  139.                         height : '40px',
  140.                 },
  141.                 ready : function() {
  142.                 },
  143.                 success : function() {
  144.                         alert('验证成功,添加你自己的代码!');
  145.                         //......后续操作
  146.                 },
  147.                 error : function() {
  148. //                         alert('验证失败!');
  149.                 }
  150.         });
  151. </script>
  152. </body>
  153. </html>
复制代码
verify.css
  1. /*常规验证码*/
  2. .verify-code {
  3.         font-size: 20px;
  4.         text-align: center;
  5.         cursor: pointer;
  6.         margin-bottom: 5px;
  7.         border: 1px solid #ddd;
  8. }
  9. .cerify-code-panel {
  10.         height:100%;
  11.         overflow:hidden;
  12. }
  13. .verify-code-area {
  14.         float:left;
  15. }
  16. .verify-input-area {
  17.         float: left;
  18.         width: 60%;
  19.         padding-right: 10px;
  20. }
  21. .verify-change-area {
  22.         line-height: 30px;
  23.         float: left;
  24. }
  25. .varify-input-code {
  26.         display:inline-block;
  27.         width: 100%;
  28.         height: 25px;
  29. }
  30. .verify-change-code {
  31.         color: #337AB7;
  32.         cursor: pointer;
  33. }
  34. .verify-btn {
  35.         width: 200px;
  36.         height: 30px;
  37.         background-color: #337AB7;
  38.         color:#FFFFFF;
  39.         border:none;
  40.         margin-top: 10px;
  41. }
  42. /*滑动验证码*/
  43. .verify-bar-area {
  44. position: relative;
  45. background: #FFFFFF;
  46.         text-align: center;
  47. -webkit-box-sizing: content-box;
  48. -moz-box-sizing: content-box;
  49. box-sizing: content-box;
  50.         border: 1px solid #ddd;
  51.         -webkit-border-radius: 4px;
  52. }
  53. .verify-bar-area .verify-move-block {
  54. position: absolute;
  55. top: 0px;
  56. left: 0;
  57. background: #fff;
  58. cursor: pointer;
  59. -webkit-box-sizing: content-box;
  60. -moz-box-sizing: content-box;
  61. box-sizing: content-box;
  62. box-shadow: 0 0 2px #888888;
  63. -webkit-border-radius: 1px;
  64. }
  65. .verify-bar-area .verify-move-block:hover {
  66. background-color: #337ab7;
  67. color: #FFFFFF;
  68. }
  69. .verify-bar-area .verify-left-bar {
  70. position: absolute;
  71. top: -1px;
  72. left: -1px;
  73.         background: #f0fff0;
  74. cursor: pointer;
  75. -webkit-box-sizing: content-box;
  76. -moz-box-sizing: content-box;
  77. box-sizing: content-box;
  78. border: 1px solid #ddd;
  79. }
  80. .verify-img-panel {
  81.         margin:0;
  82.         -webkit-box-sizing: content-box;
  83. -moz-box-sizing: content-box;
  84. box-sizing: content-box;
  85.         border: 1px solid #ddd;
  86.         border-radius: 3px;
  87.         position: relative;
  88. }
  89. .verify-img-panel .verify-refresh {
  90.         width: 25px;
  91.         height: 25px;
  92.         text-align:center;
  93.         padding: 5px;
  94.         cursor: pointer;
  95.         position: absolute;
  96.         top: 0;
  97.         right: 0;
  98.         z-index: 2;
  99. }
  100. .verify-img-panel .icon-refresh {
  101.         font-size: 20px;
  102.         color: #fff;
  103. }
  104. .verify-img-panel .verify-gap {
  105.         background-color: #fff;
  106.         position: relative;
  107.         z-index: 2;
  108.         border:1px solid #fff;
  109. }
  110. .verify-bar-area .verify-move-block .verify-sub-block {
  111.         position: absolute;
  112. text-align: center;
  113.         z-index: 3;
  114.         border: 1px solid #fff;
  115. }
  116. .verify-bar-area .verify-move-block .verify-icon {
  117.         font-size: 18px;
  118. }
  119. .verify-bar-area .verify-msg {
  120.         z-index : 3;
  121. }
  122. /*字体图标的css*/
  123. @font-face {font-family: "iconfont";
  124. src: url('../fonts/iconfont.eot?t=1508229193188'); /* IE9*/
  125. src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), /* IE6-IE8 */
  126. url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  127. url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  128. url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); /* iOS 4.1- */
  129. }
  130. .iconfont {
  131. font-family:"iconfont" !important;
  132. font-size:16px;
  133. font-style:normal;
  134. -webkit-font-smoothing: antialiased;
  135. -moz-osx-font-smoothing: grayscale;
  136. }
  137. .icon-check:before { content: "\e645"; }
  138. .icon-close:before { content: "\e646"; }
  139. .icon-right:before { content: "\e6a3"; }
  140. .icon-refresh:before { content: "\e6a4"; }
复制代码
verify.js
  1. /*! Verify-v0.1.0 MIT License by 大熊*/
  2. ;(function($, window, document,undefined) {
  3.         //定义Code的构造函数
  4. var Code = function(ele, opt) {
  5. this.$element = ele,
  6. this.defaults = {
  7.         type : 1,
  8.         figure : 100,        //位数,仅在type=2时生效
  9.         arith : 0,        //算法,支持加减乘,0为随机,仅在type=2时生效
  10.         width : '200px',
  11.                  height : '60px',
  12.                  fontSize : '30px',
  13.         codeLength : 6,
  14.         btnId : 'check-btn',
  15.         ready : function(){},
  16.         success : function(){},
  17.   error : function(){}
  18. },
  19. this.options = $.extend({}, this.defaults, opt)
  20. };
  21. 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'];
  22. var _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0'];
  23. var _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC'];
  24. //定义Code的方法
  25. Code.prototype = {
  26.         init : function() {
  27.                         var _this = this;
  28.                         this.loadDom();
  29.                         this.setCode();
  30.                         this.options.ready();
  31.                         this.$element[0].onselectstart = document.body.ondrag = function(){
  32.                                 return false;
  33.                         };
  34.                         //点击验证码
  35.                         this.$element.find('.verify-code, .verify-change-code').on('click', function() {
  36.                                 _this.setCode();
  37.                         });
  38.                         //确定的点击事件
  39.                         this.htmlDoms.code_btn.on('click', function() {
  40.                                 _this.checkCode();
  41.                         });
  42.         },
  43.         //加载页面
  44.         loadDom : function() {
  45.                 var panelHtml = '<div class="cerify-code-panel">\
  46.   <div class="verify-code"></div>\
  47.   <div class="verify-code-area">\
  48.    <div class="verify-input-area">\
  49.    <input type="text" class="varify-input-code"/>\
  50.    </div>\
  51.    <div class="verify-change-area">\
  52.    <a class="verify-change-code">换一张</a>\
  53.    </div>\
  54.   </div>\
  55.   </div>';
  56.         this.$element.append(panelHtml);
  57.         this.htmlDoms = {
  58.                 code_btn : $('#'+this.options.btnId),
  59.                 code : this.$element.find('.verify-code'),
  60.                 code_area : this.$element.find('.verify-code-area'),
  61.                 code_input : this.$element.find('.varify-input-code'),
  62.         };
  63.         this.htmlDoms.code.css({'width':this.options.width, 'height':this.options.height,'line-height':this.options.height, 'font-size':this.options.fontSize});
  64.         this.htmlDoms.code_area.css({'width':this.options.width});
  65.         },
  66.         //设置验证码
  67.         setCode : function() {
  68.                 var color1Num = Math.floor(Math.random() * 3);
  69.                 var color2Num = Math.floor(Math.random() * 5);
  70.                 this.htmlDoms.code.css({'background-color': _code_color1[color1Num], 'color': _code_color2[color2Num]});
  71.                 this.htmlDoms.code_input.val('');
  72.                 var code = '';
  73.                 this.code_chose = '';
  74.                 if(this.options.type == 1) {        //普通验证码
  75.                                 for(var i = 0; i < this.options.codeLength; i++) {
  76.                                         var charNum = Math.floor(Math.random() * 52);
  77.                                         var tmpStyle = (charNum%2 ==0)? "font-style:italic;margin-right: 10px;":"font-weight:bolder;";
  78.                                         tmpStyle += (Math.floor(Math.random() * 2) == 1)? "font-weight:bolder;":"";
  79.                                         this.code_chose += _code_chars[charNum];
  80.                                         code += '<font style="'+tmpStyle+'">'+_code_chars[charNum]+'</font>';
  81.                                 }
  82.                 }else {                //算法验证码
  83.                         var num1 = Math.floor(Math.random() * this.options.figure);
  84.                         var num2 = Math.floor(Math.random() * this.options.figure);
  85.                         if(this.options.arith == 0) {
  86.                                 var tmparith = Math.floor(Math.random() * 3);
  87.                         }
  88.                         switch(tmparith) {
  89.                                 case 1 :
  90.                                         this.code_chose = parseInt(num1) + parseInt(num2);
  91.                                         code = num1 + ' + ' + num2 + ' = ?';
  92.                                         break;
  93.                                 case 2 :
  94.                                         if(parseInt(num1) < parseInt(num2)) {
  95.                                                 var tmpnum = num1;
  96.                                                 num1 = num2;
  97.                                                 num2 = tmpnum;
  98.                                         }
  99.                                         this.code_chose = parseInt(num1) - parseInt(num2);
  100.                                         code = num1 + ' - ' + num2 + ' = ?';
  101.                                         break;
  102.                                 default :
  103.                                         this.code_chose = parseInt(num1) * parseInt(num2);
  104.                                         code = num1 + ' × ' + num2 + ' = ?';
  105.                                         break;
  106.                         }
  107.                 }
  108.                 this.htmlDoms.code.html(code);
  109.         },
  110.         //比对验证码
  111.         checkCode : function() {
  112.                 if(this.options.type == 1) {                //普通验证码
  113.                         var own_input = this.htmlDoms.code_input.val().toUpperCase();
  114.                         this.code_chose = this.code_chose.toUpperCase();
  115.                 }else {
  116.                         var own_input = this.htmlDoms.code_input.val();
  117.                 }
  118.                 if(own_input == this.code_chose) {
  119.                         this.options.success();
  120.                 }else {
  121.                         this.options.error();
  122.                         this.setCode();
  123.                 }
  124.         }
  125. };
  126. //定义Slide的构造函数
  127. var Slide = function(ele, opt) {
  128. this.$element = ele,
  129. this.defaults = {
  130.         type : 1,
  131.         vOffset: 5,
  132.   vSpace : 5,
  133.   imgName : ['1.jpg', '2.jpg'],
  134.   imgSize : {
  135.                  width: '400px',
  136.                  height: '200px',
  137.          },
  138.          blockSize : {
  139.                  width: '50px',
  140.                  height: '50px',
  141.          },
  142.          barSize : {
  143.                  width : '400px',
  144.                  height : '40px',
  145.          },
  146.   ready : function(){},
  147.         success : function(){},
  148.   error : function(){}
  149. },
  150. this.options = $.extend({}, this.defaults, opt)
  151. };
  152. //定义Slide的方法
  153. Slide.prototype = {
  154. init: function() {
  155.         var _this = this;
  156.         //加载页面
  157.         this.loadDom();
  158.         this.options.ready();
  159.         this.$element[0].onselectstart = document.body.ondrag = function(){
  160.                                 return false;
  161.                         };
  162.         //按下
  163.         this.htmlDoms.move_block.on('touchstart', function(e) {
  164.                 _this.start(e);
  165.         });
  166.         this.htmlDoms.move_block.on('mousedown', function(e) {
  167.                 _this.start(e);
  168.         });
  169.         //拖动
  170.   window.addEventListener("touchmove", function(e) {
  171.           _this.move(e);
  172.   });
  173.   window.addEventListener("mousemove", function(e) {
  174.           _this.move(e);
  175.   });
  176.   //鼠标松开
  177.   window.addEventListener("touchend", function() {
  178.           _this.end();
  179.   });
  180.   window.addEventListener("mouseup", function() {
  181.           _this.end();
  182.   });
  183.   //刷新
  184.   _this.$element.find('.verify-refresh').on('click', function() {
  185.           _this.refresh();
  186.   });
  187. },
  188. //初始化加载
  189. loadDom : function() {
  190.         this.img_rand = Math.floor(Math.random() * this.options.imgName.length);                        //随机的背景图片
  191.         var panelHtml = '';
  192.         var tmpHtml = '';
  193.         if(this.options.type != 1) {                //图片滑动
  194.                 panelHtml += '<div class="verify-img-panel">\
  195.   <div class="verify-refresh">\
  196.    <i class="iconfont icon-refresh"></i>\
  197.   </div>\
  198.    <div class="verify-gap"></div>\
  199.   </div>';
  200.                 tmpHtml = '<div class="verify-sub-block"></div>';
  201.         }
  202.         panelHtml += '<div class="verify-bar-area">\
  203.   <span class="verify-msg">向右滑动完成验证</span>\
  204.   <div class="verify-left-bar">\
  205.   <span class="verify-msg"></span>\
  206.   <div class="verify-move-block">\
  207.   <i class="verify-icon iconfont icon-right"></i>'+tmpHtml+'</div></div></div>';
  208.         this.$element.append(panelHtml);
  209.         this.htmlDoms = {
  210.                 gap : this.$element.find('.verify-gap'),
  211.                 sub_block : this.$element.find('.verify-sub-block'),
  212.                 img_panel : this.$element.find('.verify-img-panel'),
  213.                 bar_area : this.$element.find('.verify-bar-area'),
  214.                 move_block : this.$element.find('.verify-move-block'),
  215.                 left_bar : this.$element.find('.verify-left-bar'),
  216.                 msg : this.$element.find('.verify-msg'),
  217.                 icon : this.$element.find('.verify-icon'),
  218.                 refresh :this.$element.find('.verify-refresh')
  219.         };
  220.         this.status = false;        //鼠标状态
  221.         this.setSize = this.resetSize(this);        //重新设置宽度高度
  222.         this.htmlDoms.gap.css({'width': this.options.blockSize.width, 'height': this.options.blockSize.height});
  223.         this.htmlDoms.sub_block.css({'width': this.options.blockSize.width, 'height': this.options.blockSize.height});
  224.         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});
  225.         this.htmlDoms.bar_area.css({'width': this.setSize.bar_width, 'height': this.options.barSize.height, 'line-height':this.options.barSize.height});
  226.         this.htmlDoms.move_block.css({'width': this.options.barSize.height, 'height': this.options.barSize.height});
  227.         this.htmlDoms.left_bar.css({'width': this.options.barSize.height, 'height': this.options.barSize.height});
  228.         this.randSet();
  229. },
  230. //鼠标按下
  231. start: function(e) {
  232.         this.htmlDoms.msg.text('');
  233.         this.htmlDoms.move_block.css('background-color', '#337ab7');
  234.         this.htmlDoms.left_bar.css('border-color', '#337AB7');
  235.         this.htmlDoms.icon.css('color', '#fff');
  236.         e.stopPropagation();
  237.         this.status = true;
  238. },
  239. //鼠标移动
  240. move: function(e) {
  241.         if(this.status) {
  242.           if(!e.touches) { //兼容移动端
  243.           var x = e.clientX;
  244.           }else { //兼容PC端
  245.           var x = e.touches[0].pageX;
  246.           }
  247.           var bar_area_left = Slide.prototype.getLeft(this.htmlDoms.bar_area[0]);
  248.           var move_block_left = x - bar_area_left; //小方块相对于父元素的left值
  249.           if(this.options.type != 1) {                //图片滑动
  250.                   if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2) {
  251.                   move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2;
  252.                   }
  253.           }else {                //普通滑动
  254.                   if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3) {
  255.                           this.$element.find('.verify-msg:eq(1)').text('松开验证');
  256.                   move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3;
  257.                   }else {
  258.                           this.$element.find('.verify-msg:eq(1)').text('');
  259.                   }
  260.           }
  261.           if(move_block_left <= 0) {
  262.                   move_block_left = parseInt(parseInt(this.options.blockSize.width)/2);
  263.           }
  264.           //拖动后小方块的left值
  265.           this.htmlDoms.move_block.css('left', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
  266.           this.htmlDoms.left_bar.css('width', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
  267.          }
  268. },
  269. //鼠标松开
  270. end: function() {
  271.         var _this = this;
  272.         //判断是否重合
  273.         if(this.status) {
  274.                 if(this.options.type != 1) {                //图片滑动
  275.                         var vOffset = parseInt(this.options.vOffset);
  276.                   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)) {
  277.                           this.htmlDoms.move_block.css('background-color', '#5cb85c');
  278.                           this.htmlDoms.left_bar.css({'border-color': '#5cb85c', 'background-color': '#fff'});
  279.                           this.htmlDoms.icon.css('color', '#fff');
  280.                           this.htmlDoms.icon.removeClass('icon-right');
  281.                           this.htmlDoms.icon.addClass('icon-check');
  282.                           this.htmlDoms.refresh.hide();
  283.                           this.htmlDoms.move_block.unbind('mousedown touchstart');
  284.                           this.options.success();
  285.                   }else{
  286.                           this.htmlDoms.move_block.css('background-color', '#d9534f');
  287.                           this.htmlDoms.left_bar.css('border-color', '#d9534f');
  288.                           this.htmlDoms.icon.css('color', '#fff');
  289.                           this.htmlDoms.icon.removeClass('icon-right');
  290.                           this.htmlDoms.icon.addClass('icon-close');
  291.                           setTimeout(function () {
  292.                                                  _this.htmlDoms.move_block.animate({'left':'0px'}, 'fast');
  293.                                                  _this.htmlDoms.left_bar.animate({'width': '40px'}, 'fast');
  294.                                                  _this.htmlDoms.left_bar.css({'border-color': '#ddd'});
  295.                                                  _this.htmlDoms.move_block.css('background-color', '#fff');
  296.                                                  _this.htmlDoms.icon.css('color', '#000');
  297.                                                  _this.htmlDoms.icon.removeClass('icon-close');
  298.                                   _this.htmlDoms.icon.addClass('icon-right');
  299.                                   _this.$element.find('.verify-msg:eq(0)').text('向右滑动完成验证');
  300.                                          }, 400);
  301.                           this.options.error();
  302.                   }
  303.                 }else {                //普通滑动
  304.                         if(parseInt(this.htmlDoms.move_block.css('left')) >= (parseInt(this.setSize.bar_width) - parseInt(this.options.barSize.height) - parseInt(this.options.vOffset))) {
  305.                                 this.htmlDoms.move_block.css('background-color', '#5cb85c');
  306.                                 this.htmlDoms.left_bar.css({'color': '#4cae4c', 'border-color': '#5cb85c', 'background-color': '#fff' });
  307.                                 this.htmlDoms.icon.css('color', '#fff');
  308.                           this.htmlDoms.icon.removeClass('icon-right');
  309.                           this.htmlDoms.icon.addClass('icon-check');
  310.                           this.htmlDoms.refresh.hide();
  311.                           this.htmlDoms.move_block.unbind('mousedown');
  312.                           this.htmlDoms.move_block.unbind('touchstart');
  313.                                 this.$element.find('.verify-msg:eq(1)').text('验证成功');
  314.                                 this.options.success();
  315.                         }else {
  316.                                 this.htmlDoms.move_block.css('background-color', '#d9534f');
  317.                           this.htmlDoms.left_bar.css('border-color', '#d9534f');
  318.                           this.htmlDoms.icon.css('color', '#fff');
  319.                           this.htmlDoms.icon.removeClass('icon-right');
  320.                           this.htmlDoms.icon.addClass('icon-close');
  321.                           setTimeout(function () {
  322.                                                  _this.htmlDoms.move_block.animate({'left':'0px'}, 'fast');
  323.                                                  _this.htmlDoms.left_bar.animate({'width': '40px'}, 'fast');
  324.                                                  _this.htmlDoms.left_bar.css({'border-color': '#ddd'});
  325.                                                  _this.htmlDoms.move_block.css('background-color', '#fff');
  326.                                                  _this.htmlDoms.icon.css('color', '#000');
  327.                                                  _this.htmlDoms.icon.removeClass('icon-close');
  328.                                   _this.htmlDoms.icon.addClass('icon-right');
  329.                                   _this.$element.find('.verify-msg:eq(0)').text('向右滑动解锁');
  330.                                          }, 400);
  331.                           this.options.error();
  332.                         }
  333.                 }
  334.           this.status = false;
  335.         }
  336. },
  337. resetSize : function(obj) {
  338.         var img_width,img_height,bar_width,bar_height;        //图片的宽度、高度,移动条的宽度、高度
  339.         var parentWidth = obj.$element.parent().width() || $(window).width();
  340.         var parentHeight = obj.$element.parent().height() || $(window).height();
  341.                 if(obj.options.imgSize.width.indexOf('%')!= -1){
  342.                 img_width = parseInt(obj.options.imgSize.width)/100 * parentWidth + 'px';
  343.                   }else {
  344.                                 img_width = obj.options.imgSize.width;
  345.                         }
  346.                         if(obj.options.imgSize.height.indexOf('%')!= -1){
  347.                 img_height = parseInt(obj.options.imgSize.height)/100 * parentHeight + 'px';
  348.                   }else {
  349.                                 img_height = obj.options.imgSize.height;
  350.                         }
  351.                         if(obj.options.barSize.width.indexOf('%')!= -1){
  352.                 bar_width = parseInt(obj.options.barSize.width)/100 * parentWidth + 'px';
  353.                   }else {
  354.                                 bar_width = obj.options.barSize.width;
  355.                         }
  356.                         if(obj.options.barSize.height.indexOf('%')!= -1){
  357.                 bar_height = parseInt(obj.options.barSize.height)/100 * parentHeight + 'px';
  358.                   }else {
  359.                                 bar_height = obj.options.barSize.height;
  360.                         }
  361.                         return {img_width : img_width, img_height : img_height, bar_width : bar_width, bar_height : bar_height};
  362.         },
  363. //随机出生点位
  364. randSet: function() {
  365.         var rand1 = Math.floor(Math.random()*9+1);
  366.         var rand2 = Math.floor(Math.random()*9+1);
  367.         var top = rand1 * parseInt(this.setSize.img_height)/15 + parseInt(this.setSize.img_height) * 0.1;
  368.         var left = rand2 * parseInt(this.setSize.img_width)/15 + parseInt(this.setSize.img_width) * 0.1;
  369.         this.$element.find('.verify-img-panel').css('margin-bottom', this.options.vSpace + 'px');
  370.         this.$element.find('.verify-gap').css({'top': top, 'left': left});
  371.           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'});
  372. },
  373. //刷新
  374. refresh: function() {
  375.         this.randSet();
  376.         this.img_rand = Math.floor(Math.random() * this.options.imgName.length);                        //随机的背景图片
  377.   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});
  378.   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});
  379. },
  380. //获取left值
  381. getLeft: function(node) {
  382.                         var left = $(node).offset().left;
  383. //  var nowPos = node.offsetParent;
  384. //
  385. //  while(nowPos != null) {  
  386. //  left += $(nowPos).offset().left; 
  387. //  nowPos = nowPos.offsetParent;  
  388. //  }
  389.   return left;
  390. }
  391. };
  392. //定义Points的构造函数
  393. var Points = function(ele, opt) {
  394. this.$element = ele,
  395. this.defaults = {
  396.         defaultNum : 4,        //默认的文字数量
  397.                  checkNum : 3,        //校对的文字数量
  398.                  vSpace : 5,        //间隔
  399.         imgName : ['1.jpg', '2.jpg'],
  400.         imgSize : {
  401.                  width: '400px',
  402.                  height: '200px',
  403.          },
  404.          barSize : {
  405.                  width : '400px',
  406.                  height : '40px',
  407.          },
  408.          ready : function(){},
  409.         success : function(){},
  410.   error : function(){}
  411. },
  412. this.options = $.extend({}, this.defaults, opt)
  413. };
  414. //定义Points的方法
  415. Points.prototype = {
  416.         init : function() {
  417.                         var _this = this;
  418.                         //加载页面
  419.         _this.loadDom();
  420.         _this.refresh();
  421.         _this.options.ready();
  422.         this.$element[0].onselectstart = document.body.ondrag = function(){
  423.                                 return false;
  424.                         };
  425.                          //点击事件比对
  426.         _this.$element.find('.verify-img-panel canvas').on('click', function(e) {
  427.                                 _this.checkPosArr.push(_this.getMousePos(this, e));
  428.                                 if(_this.num == _this.options.checkNum) {
  429.                                         _this.num = _this.createPoint(_this.getMousePos(this, e));
  430.                                         setTimeout(function () {
  431.                                                 var flag = _this.comparePos(_this.fontPos, _this.checkPosArr);
  432.                                                 if(flag == false) {        //验证失败
  433.                                                         _this.options.error();
  434.                                                         _this.$element.find('.verify-bar-area').css({'color': '#d9534f', 'border-color': '#d9534f'});
  435.                                                  _this.$element.find('.verify-msg').text('验证失败');
  436.                                                         setTimeout(function () {
  437.                                                                 _this.$element.find('.verify-bar-area').css({'color': '#000','border-color': '#ddd'});
  438.                                                          _this.refresh();
  439.                                                  }, 400);
  440.                                                 }else {        //验证成功
  441.                                                         _this.$element.find('.verify-bar-area').css({'color': '#4cae4c', 'border-color': '#5cb85c'});
  442.                                                         _this.$element.find('.verify-msg').text('验证成功');
  443.                                                         _this.$element.find('.verify-refresh').hide();
  444.                                                         _this.$element.find('.verify-img-panel').unbind('click');
  445.                                                         _this.options.success();
  446.                                                 }
  447.                                         }, 400);
  448.                                 }
  449.                                 if(_this.num < _this.options.checkNum) {
  450.                                         _this.num = _this.createPoint(_this.getMousePos(this, e));
  451.                                 }
  452.         });
  453.          //刷新
  454.   _this.$element.find('.verify-refresh').on('click', function() {
  455.           _this.refresh();
  456.   });
  457.         },
  458.         //加载页面
  459.         loadDom : function() {
  460.                 this.fontPos = [];        //选中的坐标信息
  461.                 this.checkPosArr = [];        //用户点击的坐标
  462.                 this.num = 1;        //点击的记数
  463.                 this.img_rand = Math.floor(Math.random() * this.options.imgName.length);                        //随机的背景图片
  464.         var panelHtml = '';
  465.         var tmpHtml = '';
  466.         this.setSize = Slide.prototype.resetSize(this);        //重新设置宽度高度
  467.         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>';
  468.         this.$element.append(panelHtml);
  469.         this.htmlDoms = {
  470.                 img_panel : this.$element.find('.verify-img-panel'),
  471.                 bar_area : this.$element.find('.verify-bar-area'),
  472.                 msg : this.$element.find('.verify-msg'),
  473.         };
  474.                 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'});
  475.                 this.htmlDoms.bar_area.css({'width': this.options.barSize.width, 'height': this.options.barSize.height, 'line-height':this.options.barSize.height});
  476.         },
  477.         //绘制合成的图片
  478.         drawImg : function(obj, img) {
  479.                 //准备canvas环境
  480.                  var canvas = this.$element.find('canvas')[0];
  481.                  //var canvas=document.getElementById("myCanvas");
  482.                  var ctx=canvas.getContext("2d");
  483.                  // 绘制图片
  484.                  ctx.drawImage(img,0,0, parseInt(this.setSize.img_width), parseInt(this.setSize.img_height));
  485.                  // 绘制水印
  486.                  var fontSizeArr = ['italic small-caps bold 20px microsoft yahei', 'small-caps normal 25px arial', '34px microsoft yahei'];
  487.                  var fontStr = '天地玄黄宇宙洪荒日月盈昃辰宿列张寒来暑往秋收冬藏闰余成岁律吕调阳云腾致雨露结为霜金生丽水玉出昆冈剑号巨阙珠称夜光果珍李柰菜重芥姜海咸河淡鳞潜羽翔龙师火帝鸟官人皇始制文字乃服衣裳推位让国有虞陶唐吊民伐罪周发殷汤坐朝问道垂拱平章爱育黎首臣伏戎羌遐迩体率宾归王';        //不重复的汉字
  488.                  var fontChars = [];
  489.                  var avg = Math.floor(parseInt(this.setSize.img_width)/(parseInt(this.options.defaultNum)+1));
  490.                  var tmp_index = '';
  491.                  var color2Num = Math.floor(Math.random() * 5);
  492.                  for(var i = 1; i <= this.options.defaultNum; i++) {
  493.                          fontChars[i-1] = this.getChars(fontStr, fontChars);
  494.                          tmp_index = Math.floor(Math.random()*3);
  495.                          ctx.font = fontSizeArr[tmp_index];
  496.                          ctx.fillStyle = _code_color2[color2Num];
  497.                          if(Math.floor(Math.random() * 2) == 1) {
  498.                                  var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) + tmp_index*20 + 20;
  499.                          }else {
  500.                                  var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) - tmp_index*20;
  501.                          }
  502.                          ctx.fillText(fontChars[i-1],avg * i, tmp_y);
  503.                          this.fontPos[i-1] = {'char': fontChars[i-1], 'x': avg * i, 'y': tmp_y};
  504.                  }
  505.                  for(var i = 0; i < (this.options.defaultNum-this.options.checkNum); i++) {
  506.                          this.shuffle(this.fontPos).pop();
  507.                  }
  508.                  var msgStr = '';
  509.                  for(var i = 0; i < this.fontPos.length; i++) {
  510.                          msgStr += this.fontPos[i].char + ',';
  511.                  }
  512.                  this.htmlDoms.msg.text('请顺序点击【' + msgStr.substring(0,msgStr.length-1) + '】');
  513.                  return this.fontPos;
  514.         },
  515.         //获取坐标
  516.         getMousePos :function(obj, event) {
  517.   var e = event || window.event;
  518.   var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
  519.   var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
  520.   var x = e.clientX - ($(obj).offset().left - $(window).scrollLeft());
  521.                 var y = e.clientY - ($(obj).offset().top - $(window).scrollTop());
  522.   return {'x': x, 'y': y};
  523.         },
  524.         //递归去重
  525.         getChars : function(fontStr, fontChars) {
  526.                 var tmp_rand = parseInt(Math.floor(Math.random() * fontStr.length));
  527.                 if(tmp_rand > 0) {
  528.                         tmp_rand = tmp_rand - 1;
  529.                 }
  530.                 tmp_char = fontStr.charAt(tmp_rand);
  531.                 if($.inArray(tmp_char, fontChars) == -1) {
  532.                         return tmp_char;
  533.                 }else {
  534.                         return Points.prototype.getChars(fontStr, fontChars);
  535.                 }
  536.         },
  537.                 //洗牌数组
  538.         shuffle : function(arr) {
  539.                         var m = arr.length, i;
  540.                         while (m) {
  541.                                 i = (Math.random() * m--) >>> 0;
  542.                                 [arr[m], arr[i]] = [arr[i], arr[m]]
  543.                         }
  544.                         return arr;
  545.                 },
  546.         //创建坐标点
  547.         createPoint : function (pos) {
  548.                 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>');
  549.                 return ++this.num;
  550.         },
  551.         //比对坐标点
  552.         comparePos : function (fontPos, checkPosArr) {
  553.                 var flag = true;
  554.                 for(var i = 0; i < fontPos.length; i++) {
  555.                         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)) {
  556.                                 flag = false;
  557.                                 break;
  558.                         }
  559.                 }
  560.                 return flag;
  561.         },
  562.         //刷新
  563. refresh: function() {
  564.         var _this = this;
  565.         this.$element.find('.point-area').remove();
  566.         this.fontPos = [];
  567.         this.checkPosArr = [];
  568.         this.num = 1;
  569.         this.img_rand = Math.floor(Math.random() * this.options.imgName.length);                        //随机的背景图片
  570.         var img = new Image();
  571.                  img.src = 'images/'+this.options.imgName[this.img_rand];
  572.                          // 加载完成开始绘制
  573.                          $(img).on('load', function(e) {
  574.                 this.fontPos = _this.drawImg(_this, this);
  575.         });
  576. },
  577. };
  578. //在插件中使用codeVerify对象
  579. $.fn.codeVerify = function(options, callbacks) {
  580. var code = new Code(this, options);
  581. code.init();
  582. };
  583. //在插件中使用slideVerify对象
  584. $.fn.slideVerify = function(options, callbacks) {
  585. var slide = new Slide(this, options);
  586. slide.init();
  587. };
  588. //在插件中使用clickVerify对象
  589. $.fn.pointsVerify = function(options, callbacks) {
  590. var points = new Points(this, options);
  591. points.init();
  592. };
  593. })(jQuery, window, document);
复制代码
到此这篇关于多种范例jQuery网页验证码插件代码实例的文章就先容到这了,更多相关jQuery网页验证码插件内容请搜索草根技术分享以前的文章或继续浏览下面的相关文章盼望各人以后多多支持草根技术分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作