脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS随机生成验证码

基于JS实现一个随机生成验证码功能

 更新时间：2019年05月29日 14:31:49   作者：tyouu  
这篇文章主要介绍了基于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实现一个随机生成验证码功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 自定义的一个简单时尚js下拉选择框

    自定义的一个简单时尚js下拉选择框

    下拉选择框，是我们在网页中经常使用到的，在本文为大家详细介绍下使用js使用的下拉选择框
    2013-11-11
  • 不刷新网页就能链接新的js文件方法总结

    不刷新网页就能链接新的js文件方法总结

    在本篇文章里小编给大家整理的是关于不刷新网页就能链接新的js文件方法总结，需要的朋友们参考下。
    2020-03-03
  • JavaScript 核心参考教程 RegExp对象

    JavaScript 核心参考教程 RegExp对象

    JavaScript 核心参考教程RegExp对象,学习正则表达式的朋友可以参考下。
    2009-10-10
  • JS中的new Date()参数示例详解

    JS中的new Date()参数示例详解

    js中,new Date([params]),参数传递有五种方式,本文给大家讲解的非常详细,对new Date()参数相关知识感兴趣的朋友跟随小编一起看看吧
    2023-11-11
  • 微信小程序左滑删除功能开发案例详解

    微信小程序左滑删除功能开发案例详解

    这篇文章主要介绍了微信小程序左滑删除功能开发案例详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 最全的Javascript编码规范(推荐)

    最全的Javascript编码规范(推荐)

    本文给大家总结了js编码规范知识，非常实用，在日常程序开发中经常可以用到，大家务必掌握
    2016-06-06
  • js获取页面传来参数的方法

    js获取页面传来参数的方法

    这篇文章主要介绍了通过window.location.search来获取页面传来的参数，经测试是OK的
    2014-09-09
  • 详解JavaScript节流函数中的Throttle

    详解JavaScript节流函数中的Throttle

    函数节流，就是对会频繁触发的函数事件做一些限制，让这些函数可以在每隔一定的时间或者每次满足一定的条件下再触发。一般我们会给他起一个名字throttle。也就是节流的意思。一般这样的函数有 resize事件、ontouchmove事件等。
    2016-07-07
  • JSscript标签有哪些属性

    JSscript标签有哪些属性

    本文介绍了JSscript标签有哪些属性,向HTML页面中插入JavaScript的主要方法,就是使用script>元素.这个元素由Netscape创造并在NetscapeNavigator2中首先实现.后来,这个元素被加入到正式的HTML规范中,下面小编来讲解下JSscript标签有哪些属性,需要的朋友可以参考下
    2022-01-01
  • 微信小程序实现基于三元运算验证手机号/姓名功能示例

    微信小程序实现基于三元运算验证手机号/姓名功能示例

    这篇文章主要介绍了微信小程序实现基于三元运算验证手机号/姓名功能,涉及三元运算符的判定及字符串正则验证相关操作技巧,需要的朋友可以参考下
    2019-01-01

最新评论