一、代码
<!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 函数。