js怎么做验证码

原创

ithorizon 8个月前 (08-19) 阅读数 120 #Javascript

在JavaScript中实现验证码的一种方法是通过生成随机的数字和字母组合，然后将这个组合显示为图像。以下是一个简洁的示例，展示了怎样使用JavaScript和HTML来创建一个基本的验证码系统：

首先，我们需要在HTML中创建一个容器来显示验证码：


<html>
<head>
<title>验证码生成器</title>
</head>
<body>
<div id="captcha"></div>
<button onclick="generateCaptcha()">刷新验证码</button>
<script src="captcha.js"></script>
</body>
</html>

然后，我们在captcha.js文件中编写JavaScript代码，用于生成验证码：


function generateCaptcha() {
  let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  let captcha = '';
  for (let i = 0; i < 6; i++) {
    captcha += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  let canvas = document.getElementById('captcha');
  let width = canvas.clientWidth;
  let height = canvas.clientHeight;
  canvas.width = width;
  canvas.height = height;
  let ctx = canvas.getContext('2d');
  ctx.textBaseline = "middle";
  ctx.textAlign = "center";
  ctx.font = "bold 36px sans-serif";
  ctx.fillStyle = "#000";
  ctx.strokeStyle = "#000";
  let x = 0;
  for (let i = 0; i < captcha.length; i++) {
    let angle = Math.random() * 20 - 10;
    ctx.save();
    ctx.translate(x + width / captcha.length, height / 2);
    ctx.rotate(angle * Math.PI / 180);
    ctx.fillText(captcha.charAt(i), 0, 0);
    ctx.restore();
    x += width / captcha.length;
  }
  // 绘制随机线
  for (let i = 0; i < 5; i++) {
    ctx.beginPath();
    ctx.moveTo(Math.random() * width, Math.random() * height);
    ctx.lineTo(Math.random() * width, Math.random() * height);
    ctx.stroke();
  }
  // 绘制随机点
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.moveTo(Math.random() * width, Math.random() * height);
    ctx.lineTo(Math.random() * width, Math.random() * height);
    ctx.stroke();
  }
}