随机生成验证码原创

深处莫神

发布于 2022-8-12 11:58

浏览

0收藏

随机生成验证码

随机生成验证码-鸿蒙开发者社区

思路：
1.获取div的box盒子，生成验证码后追加到盒子，span.innertext放入字符
2.获取input框内的验证码内容
3.点击btn按钮触发事件，验证输入的验证码与给出的是否一致，设置notice提醒
4.验证码不一致，则重新生成新的验证码，重新输入（将value值设为0），保留点击过的焦点

如何随机生成验证码?

1.数组放入所有数字字母字符
2.把函数获取的长度限制为4
3.循环长度，随机数*数组长度向下取整，获取数组所有数里的随机数下标
4.设置空字符，用于连接，利用codelist[下标]即可获取任意数组里的字符
5.生成随机颜色 rgb

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 120px;
      height: 40px;
      height: 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border: 3px solid blue;
      cursor: pointer;
      margin-bottom: 5px;
    }

    #box span {
      font-size: 1.8em;
      font-weight: bold;
    }

    #code {
      height: 25px;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <input type="text" id="code" placeholder="请输入验证码" required />
  <button id="btn">验证</button><br />
  <span id="notice" style="display: none;color:red;font-size:1.5em">输入错误</span>
</body>

</html>
<script>
  var box = document.getElementById('box')
  var code = document.getElementById('code')
  var btn = document.getElementById('btn')
  var notice = document.getElementById('notice')
  var CodeStr = ''

  // 封装验证码
  function GetCode(len = 4) {

    //清空一下生成的字符串
    CodeStr = ''

    //局部变量
    var str = ''

    //box清空
    box.innerHTML = ''

    //字符串数组   0 - 61 = 62
    var codelist = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
      'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
      'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
    ]
    // 0*10 ~ 1*10
    // 0 ~ 62 = 61.9 = 61 Math.floor()
    for (var i = 0; i < len; i++) {
      var key = Math.floor(Math.random() * codelist.length)
      CodeStr += codelist[key]

      // rgb 0 ~ 255 生成随机颜色
      var r = Math.floor(Math.random() * 255)
      var g = Math.floor(Math.random() * 255)
      var b = Math.floor(Math.random() * 255)

      var span = document.createElement('span')
      span.style.color = `rgb(${r},${g},${b})`
      span.innerText = codelist[key]

      // 追加span到div中去
      box.appendChild(span)
    }

  }

  GetCode()

  // box.onclick = function () {
  //   GetCode()
  // }

  btn.onclick = function () {
    var input = code.value.trim()

    //toLowerCase 转换为小写
    if (input.toLowerCase() != CodeStr.toLowerCase()) {
      notice.style.display = 'block'
      notice.style.color = 'red'
      notice.innerText = '验证码错误'
      //重新生成验证码
      GetCode()
      code.value = ''
      code.focus()
    } else {
      notice.style.display = 'block'
      notice.style.color = 'green'
      notice.innerText = '验证码正确'
    }
  }

</script>

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

其他

标签

已于2022-8-12 11:58:20修改