html5&css&js代码 025 验证码生成与验证
- 一、代码
- 二、解释
这段HTML代码实现了一个简单的客户端验证码生成与验证功能。页面上会显示一个验证码图片，用户需要在输入框中输入看到的验证码，然后点击验证按钮进行验证。
一、代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>验证码生成与验证</title> <style> body { font-family: "微软雅黑", sans-serif; padding: 10px; background: #333333; color: #eeeeee; display: block; } h1 { text-align: center; margin: 100px; } .contaniner { text-align: center; margin: 0 auto; width: 1000px; height: 300px; font-size: 1.5em; } #captchaInput { font-size: 2em; width: 420px; } #captchaImg { display: block; margin: 0 auto; width: 1200px; height: 300px; } button { font-size: 2em; } </style> </head> <body> <div class="contaniner"> <h1>客户端验证码生成与验证</h1> <!-- 显示验证码图片 --> <img id="captchaImg" alt="Captcha Image"> <!-- 验证码输入框 --> <input type="text" id="captchaInput" placeholder="请输入验证码"> <!-- 验证按钮 --> <button id="validateBtn">验证</button> <!-- 重新生成验证码按钮 --> <button id="regenerateBtn">重新生成</button> <!-- 用于存储验证码信息 --> <script> let currentCaptchaInfo; function generateCaptcha(length = 6) { const hexChars = '0123456789ABCDEF'; let captchaCode = ''; for (let i = 0; i < length; i++) { captchaCode += hexChars[Math.floor(Math.random() * hexChars.length)]; } const canvas = document.createElement('canvas'); canvas.width = 100; canvas.height = 40; const ctx = canvas.getContext('2d'); for (let i = 0; i < captchaCode.length; i++) { ctx.font = '22px Arial'; ctx.fillStyle = '#ff0055'; const angle = (Math.random() - 0.5) * 90; ctx.save(); ctx.translate(2 + (i * 16), 28); ctx.rotate(angle * Math.PI / 180); ctx.fillText(captchaCode[i], 0, 0); ctx.restore(); } const dataUrl = canvas.toDataURL(); return {code: captchaCode, imageUrl: dataUrl}; } // 初始化验证码 window.onload = () => { regenerateCaptcha(); }; // 生成新的验证码并更新显示 function regenerateCaptcha() { currentCaptchaInfo = generateCaptcha(); document.getElementById('captchaImg').src = currentCaptchaInfo.imageUrl; document.getElementById('captchaInput').value = ''; } // 添加重新生成验证码按钮事件监听 document.getElementById('regenerateBtn').addEventListener('click', regenerateCaptcha); // 验证函数 function validateCaptcha() { const userInput = document.getElementById('captchaInput').value.toUpperCase(); if (userInput === currentCaptchaInfo.code) { alert('验证码正确!'); // 实际场景下应该清空输入框并重新生成验证码 regenerateCaptcha(); } else { alert('验证码错误，请重新输入!'); } } // 添加验证按钮事件监听 document.getElementById('validateBtn').addEventListener('click', validateCaptcha); </script> <h3> <br> <br> HTML+CSS+JavaScript编程配套代码 作者：明月看潮生 </h3> </div> </body> </html>
二、解释
这段HTML代码实现了一个简单的客户端验证码生成与验证功能。页面上会显示一个验证码图片，用户需要在输入框中输入看到的验证码，然后点击验证按钮进行验证。如果用户输入的验证码与生成的验证码一致，则会弹出“验证码正确!”的提示，否则会弹出“验证码错误，请重新输入!”的提示。用户还可以点击重新生成按钮来生成一个新的验证码。
页面中的JavaScript代码实现了以下功能：
generateCaptcha 函数用于生成指定长度的验证码，并将其以特定的样式绘制到canvas上，最后将验证码和对应的图片数据URL返回。
在 window.onload 事件中调用 regenerateCaptcha 函数初始化验证码。
regenerateCaptcha 函数用于生成新的验证码并更新显示。
为重新生成验证码按钮添加事件监听器，当按钮被点击时调用 regenerateCaptcha 函数。
validateCaptcha 函数用于验证用户输入的验证码是否与当前生成的验证码一致，如果一致则弹出“验证码正确!”的提示，否则弹出“验证码错误，请重新输入!”的提示。
为验证按钮添加事件监听器，当按钮被点击时调用 validateCaptcha 函数。
