基于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 相关文章推荐
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 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
Laravel中任务调度console使用方法小结
2017/05/07 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
PHP实现简单日历类编写
2020/08/28 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
JQuery球队选择实例
2015/05/18 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python编写一个优美的下载器
2018/04/15 Python
Python 统计字数的思路详解
2018/05/08 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
十一个高级MySql面试题
2014/10/06 面试题
店面销售职位的职责
2014/03/09 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
教师工作证明范本
2015/06/12 职场文书
2015入党个人自传范文
2015/06/26 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
导游经典开场白——导游词
2019/04/17 职场文书