一个菜鸟的互联网技术分享博客
您的位置: 主页 > jQuery数字字母组合验证码
advertisement

jQuery数字字母组合验证码

1、HTML部分:

  1. <center>  
  2.   <div>  
  3.     <input type="text" class="input-code" placeholder="验证码">  
  4.     <span class="code"  title='点击切换'></span>  
  5.   </div>  
  6. </center>  

2、CSS部分(根据所需条件来)

3、JS部分:

  1. $(function () {  
  2.     $('.code').createCode({  
  3.       len:6  
  4.     });  
  5.   });  
  6.       
  7.   $('.input-code').blur(function () {  
  8.     if($(this).val().toLowerCase()!==$('.code').children('input').val().toLowerCase()){  
  9.       alert('验证码不正确')  
  10.     }else{  
  11.       alert('验证通过')  
  12.     }  
  13.   })  

4、需要引入文件(jQuery的cdn和jquery.code.js)

5、jquery.code.js代码如下:

  1. ;(function ($) {  
  2.   function createCode(dom, config) {  
  3.     var _this = this;  
  4.     _this.config = config  
  5.     _this.codeList = [123456789, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];  
  6.     _this.color = ['#e3730f', '#2ae3e0', '#c317e3', '#0e935f','#e30d65', '#3c8b36', '#74675a', '#654321','#123345', '#135784', '#169b9a', '#02468a'];  
  7.     _this.bgColorList = ['#b1b1b1', '#e3d7cc', '#d0d9f9', '#f8f2d6'];  
  8.     _this.bgColor = '';  
  9.     _this.code = '';  
  10.     if (_this.config) {  
  11.       _this.codeLen = _this.config.len || 4;  
  12.     } else {  
  13.       _this.codeLen = 4;  
  14.     }  
  15.     var html = '';  
  16.     var deg = 0;  
  17.     for (i = 0; i < _this.codeLen; i++) {  
  18.       var index = Math.floor(Math.random() * _this.codeList.length);  
  19.       var idx = Math.floor(Math.random() * _this.color.length);  
  20.       var bgIdx = Math.floor(Math.random() * _this.bgColorList.length);  
  21.       if (index % 2 == 0) {  
  22.         deg = index + Math.floor(Math.random() * idx)  
  23.       } else {  
  24.         deg = -(index + Math.floor(Math.random() * idx))  
  25.       }  
  26.       html += '<span style="padding:0 2px;color:' + _this.color[idx] + ';display:inline-block;transform:rotate(' + deg + 'deg);">' + _this.codeList[index] + '</span>';  
  27.       _this.code += _this.codeList[index];  
  28.       _this.bgColor = _this.bgColorList[bgIdx]  
  29.   
  30.     }  
  31.     html += '<input placeholder="" value="'+_this.code+'" type="hidden">';  
  32.     $(dom).css({  
  33.       width: _this.codeLen * 20 + 'px',  
  34.       padding: '1px',  
  35.       textAlign: 'center',  
  36.       display: 'inline-block',  
  37.       backgroundColor: _this.bgColor,  
  38.       cursor: "pointer",  
  39.       opacity: .6  
  40.     });  
  41.     $(dom).empty().append(html);  
  42.   }  
  43.   
  44.   $.fn.createCode = function (cfg) {  
  45.     var _this = this;  
  46.     createCode(_this, cfg);  
  47.     $(_this).click(function () {  
  48.       createCode(_this, cfg);  
  49.     });  
  50.   }  
  51. })(jQuery);  

6、效果图:


zhangren.online
上一篇:jquery文字左右无缝滚动
下一篇:页面悬浮窗上下左右移动

您可能喜欢

​input中输入大于0的正整数

​input中输入大于0的正整数

​原生js实现移动端Touch滑动反弹

​原生js实现移动端Touch滑动反弹

​页面悬浮窗上下左右移动

​页面悬浮窗上下左右移动

​jquery ajax防重复提交

​jquery ajax防重复提交

​面试题:杂乱字母出现的次数

​面试题:杂乱字母出现的次数

回到顶部