基于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 相关文章推荐
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
关于ES6箭头函数中的this问题
Feb 27 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导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
js选择器全面解析
2016/06/27 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
python 把数据 json格式输出的实例代码
2016/10/31 Python
Python正则表达式使用范例分享
2016/12/04 Python
python基础教程之五种数据类型详解
2017/01/12 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
python psutil库安装教程
2018/03/19 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
实习单位接收函
2014/01/11 职场文书
总经理岗位职责范本
2014/02/02 职场文书
机关单位动员会主持词
2014/03/20 职场文书
法定代表人授权委托书
2014/04/04 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
礼貌问候语大全
2015/11/10 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android