authcode js实现

验证码（AuthCode）的 JavaScript 实现

验证码通常用于防止自动化提交或机器人攻击。以下是几种常见的验证码实现方式：

数字验证码生成

生成随机数字验证码并显示在页面上：

function generateNumericAuthCode(length = 6) {
  let code = '';
  for (let i = 0; i < length; i++) {
    code += Math.floor(Math.random() * 10);
  }
  return code;
}

// 使用示例
const authCode = generateNumericAuthCode();
console.log(authCode); // 例如：583729

图形验证码实现

创建带有干扰线的图形验证码：

function createGraphicAuthCode(canvasId, codeLength = 4) {
  const canvas = document.getElementById(canvasId);
  const ctx = canvas.getContext('2d');

  // 生成随机验证码
  let code = '';
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';

  for (let i = 0; i < codeLength; i++) {
    code += chars.charAt(Math.floor(Math.random() * chars.length));
  }

  // 绘制背景
  ctx.fillStyle = '#f3f3f3';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制验证码
  ctx.font = 'bold 24px Arial';
  for (let i = 0; i < code.length; i++) {
    ctx.fillStyle = getRandomColor();
    ctx.fillText(code[i], 15 + i * 25, 30);
  }

  // 添加干扰线
  for (let i = 0; i < 5; i++) {
    ctx.strokeStyle = getRandomColor();
    ctx.beginPath();
    ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.stroke();
  }

  return code;
}

function getRandomColor() {
  const r = Math.floor(Math.random() * 200);
  const g = Math.floor(Math.random() * 200);
  const b = Math.floor(Math.random() * 200);
  return `rgb(${r}, ${g}, ${b})`;
}

// HTML中需要有一个canvas元素：<canvas id="authCanvas" width="120" height="40"></canvas>
// 使用示例
const correctCode = createGraphicAuthCode('authCanvas');

验证码验证逻辑

验证用户输入的验证码是否正确：

function validateAuthCode(userInput, correctCode) {
  return userInput.toLowerCase() === correctCode.toLowerCase();
}

// 使用示例
const userInput = document.getElementById('authCodeInput').value;
if (!validateAuthCode(userInput, correctCode)) {
  alert('验证码错误');
  return false;
}

滑动验证码基础实现

简单的滑动验证码实现思路：

let startX = 0;
let isDragging = false;
const slider = document.getElementById('slider');
const track = document.getElementById('track');
const thumb = document.getElementById('thumb');

thumb.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX - thumb.offsetLeft;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

  let newLeft = e.clientX - startX;
  if (newLeft < 0) newLeft = 0;
  if (newLeft > track.offsetWidth - thumb.offsetWidth) {
    newLeft = track.offsetWidth - thumb.offsetWidth;
    // 验证成功
    document.getElementById('slider-result').innerText = '验证成功';
    isDragging = false;
  }

  thumb.style.left = newLeft + 'px';
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  if (parseInt(thumb.style.left || 0) < track.offsetWidth - thumb.offsetWidth) {
    thumb.style.left = '0px';
  }
});

短信验证码倒计时

发送短信验证码时的倒计时功能：

function startCountdown(seconds, buttonId) {
  const btn = document.getElementById(buttonId);
  let remaining = seconds;

  btn.disabled = true;
  btn.textContent = `重新发送(${remaining}s)`;

  const timer = setInterval(() => {
    remaining--;
    btn.textContent = `重新发送(${remaining}s)`;

    if (remaining <= 0) {
      clearInterval(timer);
      btn.disabled = false;
      btn.textContent = '获取验证码';
    }
  }, 1000);
}

// 使用示例
document.getElementById('sendCodeBtn').addEventListener('click', () => {
  // 发送验证码逻辑...
  startCountdown(60, 'sendCodeBtn');
});

这些实现可以根据具体需求进行调整和扩展。图形验证码可以增加更多干扰元素提高安全性，短信验证码需要配合后端实现完整的发送和验证流程。