基于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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
jquery 弹出层实现代码
Oct 30 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
js+canvas实现五子棋小游戏
Aug 02 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 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文件上传实例详解!!!
2007/01/02 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
php中动态调用函数的方法
2015/03/16 PHP
详解PHP队列的实现
2019/03/14 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
星球大战与Python之间的那些事
2016/01/07 Python
详解Python文本操作相关模块
2017/06/22 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
速比涛英国官网:Speedo英国
2019/07/15 全球购物
岗位职责范本
2013/11/23 职场文书
学校介绍信范文
2014/01/14 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
四年级学生期末评语
2014/12/26 职场文书