Html5生成验证码的示例代码

当前位置：电视猫 > Html5>

电视猫时间： 2024-08-01 09:58:57

　　Html5生成验证码的示例代码

HTML5 Canvas 生成验证码示例代码

1. HTML 结构

HTML

<!DOCTYPE html>
<html>
<head>
    <title>HTML5验证码生成</title>
</head>
<body>
    <canvas id="captchaCanvas" width="100" height="30"></canvas>
    <input type="text" id="captchaInput" placeholder="请输入验证码">
    <button onclick="validateCaptcha()">验证</button>
    <script src="script.js"></script>
</body>
</html>

2. JavaScript 代码 (script.js)

JavaScript

const canvas = document.getElementById('captchaCanvas');
const ctx = canvas.getContext('2d');
const input = document.getElementById('captchaI   1. github.com 

github.comnput');

// 生成随机字符
function generateRandomChar() {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  return chars.charAt(Math.floor(Math.random() * chars.le   1. github.com 

 MIT 
github.comngth));
}

// 生成随机颜色
function getRandomColor() {
  return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

// 绘制验证码
function drawCaptcha() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.font = 'bold 24px sans-serif';
  ctx.textBaseline = 'middle';
  ctx.textAlign = 'center';

  const captchaText = '';
  for (let i = 0; i < 4; i++) {
    ctx.fillStyle = getRandomColor();
    ctx.fillText(generateRandomChar(), 20 + i * 25, 15);
  }

  // 添加干扰线
  for (let i = 0; i < 5; i++) {
    ctx.beginPath();
    ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.str   1. bulldogjob.pl 

bulldogjob.ploke();
  }
}

// 验证验证码
function validateCaptcha() {
  if (input.value.toLowerCase() === captchaText.toLowerCase()) {
    alert('验证码正确！');
  } else {
    alert('验证码错误！');
    drawCaptcha();
  }
}

// 初始绘制验证码
drawCaptcha();

代码解释

HTML结构: 创建一个canvas元素用于绘制验证码，一个输入框用于输入验证码，一个按钮用于验证。
JavaScript代码:
- 生成随机字符和颜色: 定义函数生成随机字符和随机颜色。
- 绘制验证码:
  - 清空画布。
  - 设置字体样式。
  - 随机生成4个字符，并绘制到画布上。
  - 添加随机的干扰线。
- 验证验证码: 比较输入的验证码和生成的验证码是否一致。
- 初始绘制: 页面加载时，初始绘制一个验证码。