基于JS实现一个随机生成验证码功能


Posted in Javascript onMay 29, 2019

效果展示

基于JS实现一个随机生成验证码功能

实现原理

1. html:一般就是一个div: <div id="code"></div> ,样式根据需求设计。

2. JS:1)将所有的验证码所用的字符放在一个字符串中

 

  2)在这个字符串的字符个数以内,随机生成索引号

  3)根据索引号查找对应字符,拼接成验证码的字符串

代码实现

HTML:

<div id="code"></div>

CSS:

* {
  margin: 0;
  padding: 0;
}
div {
  width: 80px;
  height: 30px;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  color: #333;
  border: 1px solid red;
  margin: 100px auto;
  cursor: pointer;
}

JavaScript:

var codeStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var oDiv = document.getElementById('code');
// 用来生成随机整数
function getRandom(n, m) { // param: (Number, Number)
  n = Number(n);
  m = Number(m);
  // 确保 m 始终大于 n
  if (n > m) {
    var temp = n;
    n = m;
    m = temp;
  }
  // 下有详细说明
  return Math.floor(Math.random()*(m - n) + n);
}
// 将随机生成的整数下标对应的字母放入div中
function getCode() {
  var str = '';
  // 验证码有几位就循环几次
  for (var i = 0;i < 4;i ++) {
    var ran = getRandom(0, 62);
    str += codeStr.charAt(ran);
  }
  oDiv.innerHTML = str;
}
getCode();// 调用函数,页面刷新也会刷新验证码
// 点击刷新验证码
oDiv.onclick = function(){
  getCode();
}

代码分析

JS:

1)将所有的验证码所用的字符放在一个字符串中

             -- > 代码第1行,除了字母数字也可放入中文汉字等。

 

        2)在这个字符串的字符个数以内,随机生成索引号

             -- > 第4行的函数用于生成随机整数,参数 (n, m)为数字,Number()确保是数字

        默认m > n,防止传参有误,用if判断后改正

        Math.random() -- > [0,1)

        Math.random() * (m - n) -- > [0, m - n)

        Math.random() * (m - n) + n -- > [n, m)

        为了能将codeStr所有的下标都取到,上述m若是codeStr.length,想要取值能取到最后一位,再使用Math.floor()向下取整。

        n 为 0,m 为 codeStr.length 则随机范围为codeStr的所有元素下标。例(n, m) -- > (0, 62)计算后的取值范围:下标为[0, 61]的整数。

        3)根据下标查找对应元素,拼接成验证码的字符串

        第17行的函数getCode()获取字符串中对应元素,并拼接成字符串返回到页面中。最后点击div可不断生成随机验证码。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>随机生成验证码</title>
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  div {
    width: 80px;
    height: 30px;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #333;
    border: 1px solid red;
    margin: 100px auto;
    cursor: pointer;
  }
  </style>
</head>

<body>
  <div id="code"></div>

  <script>
  var codeStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  var oDiv = document.getElementById('code');
  // 用来生成随机整数
  function getRandom(n, m) { // param: (Number, Number)
    n = Number(n);
    m = Number(m);
    // 确保 m 始终大于 n
    if (n > m) {
      var temp = n;
      n = m;
      m = temp;
    }
    return Math.floor(Math.random()*(m - n) + n);
  }
  // 将随机生成的整数下标对应的字母放入div中
  function getCode() {
    var str = '';
    // 验证码有几位就循环几次
    for (var i = 0;i < 4;i ++) {
      var ran = getRandom(0, 62);
      str += codeStr.charAt(ran);
    }
    oDiv.innerHTML = str;
  }
  getCode();// 调用函数,页面刷新也会刷新验证码
  // 点击刷新验证码
  oDiv.onclick = function(){
    getCode();
  }
  </script>
</body>
</html>

总结

以上所述是小编给大家介绍的基于JS实现一个随机生成验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用JavaScript调用WebService的示例
Apr 07 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
js返回顶部实例分享
Dec 21 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 #Javascript
深入了解响应式React Native Echarts组件
May 29 #Javascript
node将geojson转shp返回给前端的实现方法
May 29 #Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 #Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 #Javascript
JS学习笔记之数组去重实现方法小结
May 29 #Javascript
基于Vue实现电商SKU组合算法问题
May 29 #Javascript
You might like
PHP函数utf8转gb2312编码
2006/12/21 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
化学工程专业求职信
2014/08/10 职场文书
青涩记忆观后感
2015/06/18 职场文书
离职告别感言
2015/08/04 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
深度学习详解之初试机器学习
2021/04/14 Python