JavaScript实现随机五位数验证码


Posted in Javascript onSeptember 27, 2019

本文实例为大家分享了js实现随机五位数验证码的具体代码,供大家参考,具体内容如下

功能展示:

点击按钮,随机生成数字+大小写字母验证码

JavaScript实现随机五位数验证码

JavaScript实现随机五位数验证码

所有代码:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>随机生成验证码</title>
</head>
<style>
/*验证码*/

.upload-awrp {
 overflow: hidden;
 margin: 120px 0;
}

.code {
 font-family: Arial;
 font-style: italic;
 font-size: 30px;
 border: 0;
 padding: 2px 3px;
 letter-spacing: 3px;
 font-weight: bolder;
 float: left;
 cursor: pointer;
 width: 150px;
 height: 60px;
 line-height: 60px;
 text-align: center;
 vertical-align: middle;
 border: 1px solid #6D6D72;
}
</style>

<body>

<!--随机验证码-->
<div id="check-code" style="overflow: hidden;">
 <div class="code" id="data_code"></div>
</div>

<script src="js/jquery.min.js"></script>
<script type="text/javascript">

 $.fn.code_Obj = function(o) {
  var _this = $(this);
  var options = {
   code_l: o.codeLength,//验证码长度
   codeChars: [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'
   ],
   codeColors: ['#f44336', '#009688', '#cddc39', '#03a9f4', '#9c27b0', '#5e4444', '#9ebf9f', '#ffc8c4', '#2b4754', '#b4ced9', '#835f53', '#aa677e'],
   code_Init: function() {
   var code = "";
   var codeColor = "";
   var checkCode = _this.find("#data_code");
   for(var i = 0; i < this.code_l; i++) {
    var charNum = Math.floor(Math.random() * 52);
    code += this.codeChars[charNum];
   }
   for(var i = 0; i < this.codeColors.length; i++) {
    var charNum = Math.floor(Math.random() * 12);
    codeColor = this.codeColors[charNum];
   }
   console.log(code);
   if(checkCode) {
    checkCode.css('color', codeColor);
    checkCode.className = "code";
    checkCode.text(code);
    checkCode.attr('data-value', code);
   }
   }
  };

  options.code_Init();//初始化验证码
  _this.find("#data_code").bind('click', function() {
   options.code_Init();
  });
 };

 $('#check-code').code_Obj({
  codeLength: 5
 });
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js修改input的type属性问题探讨
Oct 12 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 #Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 #Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 #Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 #Javascript
微信小程序 冒泡事件原理解析
Sep 27 #Javascript
JavaScript实现背景自动切换小案例
Sep 27 #Javascript
vue监听用户输入和点击功能
Sep 27 #Javascript
You might like
第三节 定义一个类 [3]
2006/10/09 PHP
实用函数9
2007/11/08 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
php多文件上传下载示例分享
2014/02/20 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
Python生成随机数的方法
2014/01/14 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
Python学习入门之区块链详解
2017/07/25 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
python判断输入日期为第几天的实例
2018/11/13 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Ajax和javascript的区别
2013/07/20 面试题
秋季运动会加油稿200字
2014/01/11 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
美术社团活动总结
2014/06/27 职场文书
农村文化活动总结
2014/08/28 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
2014年综合治理工作总结
2014/11/20 职场文书