用js做数字大小写字母混合的随机四位验证码

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">AGDHspan>
  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>

你可能感兴趣的:(JavaScript的练习,javascript,html,前端)