基于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下JS读取xml文件示例代码
Aug 05 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
js的2种继承方式详解
Mar 04 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 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安全编程之加密功能
2006/10/09 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
python实现人人网登录示例分享
2014/01/19 Python
Python编程之多态用法实例详解
2015/05/19 Python
利用python如何处理nc数据详解
2018/05/23 Python
Python多进程写入同一文件的方法
2019/01/14 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
临床医学专业学生的自我评价分享
2013/11/21 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
运动会通讯稿200字
2014/02/16 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
关爱空巢老人感想
2015/08/11 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技