用js做数字大小写字母混合的随机四位验证码_使用javascript的数组和数学对象,生成4位数验证码(验证码包含大小写字母和0到9的

作者：数据灵魂 | 2024-02-01 19:15:18

踩

使用javascript的数组和数学对象,生成4位数验证码(验证码包含大小写字母和0到9的

<!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>用js做数字字母混合的随机四位验证码</title>
  <style>
    #box {
      display: flex;
    }

    #box span {
      display: inline-block;
      width: 80px;
      height: 40px;
      margin-left: 5px;
      line-height: 40px;
      text-align: center;
      border-radius: 5px;
      background-color: pink;
    }

    #result {
      height: 35px;
    }
  </style>
</head>

<body>
  <div id="box">
    <input type="text" placeholder="请输入验证码" id="ipt">
    <span id="span">AGDH</span>
  </div>
  <div id="result"></div>
</body>
<script>
  /*
   1.点击span标签随机生成一个四位的验证码由大小写英文字符、数字组成
  2.文本框失去焦点时，判断输入的验证码是否正确。验证码正确，则提示验证码正确；如果错误，提示验证码错误。
  
  //获取span标签的内容 
  失去焦点的事件obj.onblur = function() {}*/
  var ipt = document.getElementById("ipt");
  var span = document.getElementById('span');
  var result = document.getElementById('result');
  var arr = [];//定义一个数组
  // var code = '';//定义一个空的字符串，表示生成的验证码
  //放大写字母
  for (var i = 65; i <= 90; i++) {
    var ch = String.fromCharCode(i);
    arr.push(ch);
  }
  //放小写字母
  for (var i = 97; i <= 122; i++) {
    var ch = String.fromCharCode(i);
    arr.push(ch);
  }
  // 放数字
  for (var i = 0; i <= 9; i++) {
    arr.push(i);
  }
  console.log(arr);
  span.onclick = function () {
    var code = '';//定义一个空的字符串，表示生成的验证码
    //随机生成4个索引，利用索引到数组中找到对应的字符，生成一个字符串
    for (var i = 1; i <= 4; i++) {
      var index = parseInt(Math.random() * arr.length);
      code += arr[index];
    }
    span.innerHTML = code;
  }

  //失去焦点的事件
  ipt.onblur = function () {
    //获取文本框输入的值
    var str = ipt.value.trim().toUpperCase();
    //获取验证码
    var code = span.innerHTML.trim().toUpperCase();
    //判断是否相等
    if (str == code) {
      result.innerHTML = "输入正确！"
    } else {
      result.innerHTML = "输入错误！"
    }
  }

</script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/54608