3.验证码

最新推荐文章于 2024-02-22 16:53:56 发布

如果决定要走又何必挽留

最新推荐文章于 2024-02-22 16:53:56 发布

阅读量157

点赞数

分类专栏：代码练习文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_59076775/article/details/126863050

版权

JavaScript 验证码随机数验证动态生成

关键词由CSDN通过智能技术生成

代码练习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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: 350px;
        height: 500px;
        background-color: #ccc;
        margin: 100px auto;
      }
      .top {
        display: flex;
      }
      .yzm {
        text-align: center;
        padding-top: 10px;
        box-sizing: border-box;
        /* transform: translate(-50%,-50%); */
        width: 100px;
        height: 50px;
        color: #fff;
        background-color: aqua;
        margin-right: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="top">
        <div class="yzm" id="yzm">1232</div>
        <p id="btn">刷新</p>
      </div>
      <div class="bottom">
        <input type="text" id="input" />
        <button id="submit">确定</button>
      </div>
    </div>
  </body>
  <script>
    function fn() {
      let str = "";
      let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
      for (let i = 0; i < 6; i++) {
        let num = Math.round(Math.random() * (15 - 0) + 0); //得到下标
        str += arr[num];
      }
      // 返回给函数
      return str;
    }

    // 页面进行加载就获取验证码
    window.onload = function () {
      document.getElementById("yzm").innerText = fn();
    };

    document.getElementById("btn").onclick = function () {
        document.getElementById("yzm").innerText = fn();
    };

    document.getElementById("submit").onclick = function () {
        // console.log( document.getElementById("input").value);
    //   //   输入框的对比
      document.getElementById("input").value===document.getElementById("yzm").innerText
        ? alert('输入正确')
        : alert('输入错误')  ,  document.getElementById("input").value = "";
    };
  </script>
</html>

效果图：