基于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 相关文章推荐
ie支持function.bind()方法实现代码
Dec 27 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
javascript中Function类型详解
Apr 28 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
vue监听dom大小改变案例
Jul 29 Javascript
原生js实现无缝轮播图效果
Jan 28 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_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
php二维码生成
2015/10/19 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
python使用post提交数据到远程url的方法
2015/04/29 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
pandas 空数据处理方法详解
2019/11/02 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
餐厅考勤管理制度
2014/01/28 职场文书
高中生物教学反思
2014/02/05 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
爱牙日活动总结
2014/08/29 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
如何理解及使用Python闭包
2021/06/01 Python
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python