<!DOCTYPE html>
<html>
  <head>
    <title>图形验证</title>
    <style>
      #canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="200" height="100"></canvas>
    <br>
    <button onclick="validate()">验证</button>
    <br>
    <span id="result"></span>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
      var randomChar = "";
      for (var i = 0; i < 4; i++) {
        randomChar += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      ctx.font = "30px Arial";
      ctx.fillText(randomChar, 50, 60);
      function validate() {
        var input = prompt("请输入验证码");
        if (input === randomChar) {
          document.getElementById("result").innerHTML = "验证通过";
        } else {
          document.getElementById("result").innerHTML = "验证失败";
        }
      }
    </script>
  </body>
</html
写一份html图形验证代码

原文地址: https://www.cveoy.top/t/topic/eO7z 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录