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 相关文章推荐
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
layui导航栏实现代码
May 19 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
Vue头像处理方案小结
Jul 26 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
php查询whois信息的方法
2015/06/08 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
JavaScript版代码高亮
2006/06/26 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
简述Python中的进程、线程、协程
2016/03/18 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
主题团日活动总结
2014/06/25 职场文书
投标承诺函格式
2015/01/21 职场文书
苏州园林导游词
2015/02/03 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
CSS基础详解
2021/10/16 HTML / CSS
Redis主从复制操作和配置详情
2022/09/23 Redis