基于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 相关文章推荐
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 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 EOT定界符的使用详解
2008/09/30 PHP
PHP 采集程序原理分析篇
2010/03/05 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
thinkphp分页实现效果
2016/10/13 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
Django时区详解
2019/07/24 Python
jupyter 添加不同内核的操作
2021/02/06 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
机关门卫的岗位职责
2014/04/29 职场文书
农业生产宣传标语
2014/10/08 职场文书
品质保证书格式
2015/02/28 职场文书
大学推普周活动总结
2015/05/07 职场文书
预备党员群众意见
2015/06/01 职场文书
郭明义观后感
2015/06/08 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
HTML中的表格元素介绍
2022/02/28 HTML / CSS
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL