欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2020-10-07 14:25:45|栏目:JavaScript代码|点击:

效果展示

实现原理

  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>

总结

上一篇:window.event.keyCode兼容IE和Firefox实现js代码

栏    目:JavaScript代码

下一篇:Javascript实现的CSS代码高亮显示

本文标题:基于JS实现一个随机生成验证码功能

本文地址:http://www.codeinn.net/misctech/7869.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有