<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">算术验证码生成器</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
min-height: 100vh;
background: linear-gradient(135deg, #f0f4ff, #e6eeff);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.card {
background: rgba(255,255,255,0.85);
backdrop-filter: blur(6px);
border-radius: 48px;
padding: 40px 36px;
box-shadow: 0 20px 40px rgba(0, 20, 50, 0.15), 0 8px 20px rgba(0, 0, 0, 0.05);
width: 100%;
max-width: 520px;
transition: 0.25s;
border: 1px solid rgba(255,255,255,0.5);
}
h2 {
font-weight: 600;
font-size: 1.8rem;
letter-spacing: -0.5px;
color: #0b1e38;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 28px;
}
h2 span {
background: #1b3a6b;
color: white;
font-size: 1rem;
padding: 0 14px;
border-radius: 40px;
line-height: 28px;
font-weight: 500;
}
.captcha-box {
background: white;
border-radius: 28px;
padding: 28px 24px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.02), 0 8px 18px rgba(18, 38, 70, 0.08);
border: 1px solid rgba(255,255,255,0.6);
margin-bottom: 24px;
}
.equation-area {
display: flex;
align-items: center;
justify-content: center;
gap: 12px 16px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.math-display {
font-size: 2.8rem;
font-weight: 700;
background: #f2f6ff;
padding: 8px 24px;
border-radius: 60px;
min-width: 180px;
text-align: center;
color: #0b1e38;
letter-spacing: 2px;
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
border: 1px solid #dce4f0;
font-family: 'Courier New', monospace;
}
.result-area {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin: 16px 0 6px;
}
.result-badge {
background: #d9e3fc;
padding: 8px 22px;
border-radius: 40px;
font-size: 1.2rem;
font-weight: 500;
color: #10345e;
border: 1px solid #bfd0f0;
}
.input-group {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin: 18px 0 6px;
}
#userAnswer {
width: 140px;
padding: 14px 18px;
border: 2px solid #cfdcee;
border-radius: 60px;
font-size: 1.3rem;
text-align: center;
background: white;
transition: 0.2s;
outline: none;
font-weight: 500;
color: #0a1e3a;
}
#userAnswer:focus {
border-color: #2f62ae;
box-shadow: 0 0 0 4px rgba(47, 98, 174, 0.2);
}
.button-group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
margin: 24px 0 8px;
}
.btn {
background: white;
border: none;
padding: 12px 28px;
border-radius: 60px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
transition: all 0.15s ease;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid transparent;
}
.btn-primary {
background: #1b3a6b;
color: white;
box-shadow: 0 6px 12px rgba(27, 58, 107, 0.25);
}
.btn-primary:hover {
background: #234882;
transform: scale(1.02);
}
.btn-outline {
border: 1px solid #b8cbeb;
background: white;
color: #1f3f6d;
}
.btn-outline:hover {
background: #edf3ff;
border-color: #7f9fd5;
}
.btn-success {
background: #1f7a4c;
color: white;
box-shadow: 0 6px 12px rgba(31, 122, 76, 0.25);
}
.btn-success:hover {
background: #268f58;
transform: scale(1.02);
}
.feedback {
margin-top: 20px;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 500;
background: #f2f7ff;
border-radius: 60px;
padding: 8px 16px;
border: 1px solid #deeaff;
transition: 0.15s;
color: #132d4f;
}
.feedback.correct {
background: #daf1e3;
border-color: #8fc7a8;
color: #0a452b;
}
.feedback.wrong {
background: #ffe2df;
border-color: #f7b5ae;
color: #a1352a;
}
.small-note {
color: #4a6385;
margin-top: 16px;
font-size: 0.85rem;
text-align: center;
opacity: 0.8;
}
.icon {
font-size: 1.2rem;
}
hr {
border: none;
border-top: 2px dashed #cfddf5;
margin: 16px 0;
}
</style>
</head>
<body>
<div class="card">
<h2>
🧮 算术验证码
<span>v1.0</span>
</h2>
<div class="captcha-box">
<!-- 算式显示区域 -->
<div class="equation-area">
<div class="math-display" id="equationDisplay">12 + 34</div>
<span style="font-size: 1.8rem; color: #1b3a6b;">=</span>
<div class="result-badge" id="resultBadge">?</div>
</div>
<!-- 输入与操作 -->
<div class="input-group">
<input type="number" id="userAnswer" placeholder="输入答案" value="">
</div>
<div class="button-group">
<button class="btn btn-primary" id="newCaptchaBtn">🔄 换一题</button>
<button class="btn btn-success" id="verifyBtn">✓ 验证</button>
<button class="btn btn-outline" id="showAnswerBtn">👁 答案</button>
</div>
</div>
<!-- 反馈信息 -->
<div class="feedback" id="feedbackMessage">✨ 输入答案，点击验证</div>
<hr>
<div class="small-note">
⚡ 每次生成随机两位数加减法 (结果0~99)
</div>
</div>
<script>
(function() {
// DOM 元素
const equationDisplay = document.getElementById('equationDisplay');
const resultBadge = document.getElementById('resultBadge');
const userInput = document.getElementById('userAnswer');
const feedbackEl = document.getElementById('feedbackMessage');
const newCaptchaBtn = document.getElementById('newCaptchaBtn');
const verifyBtn = document.getElementById('verifyBtn');
const showAnswerBtn = document.getElementById('showAnswerBtn');
// 当前验证码的数据状态
let currentCaptcha = {
operand1: 0,
operand2: 0,
operator: '+', // '+' 或 '-'
result: 0
};
// 辅助: 随机整数 [min, max]
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 生成新的算术验证码 (两位正整数, 加减法, 结果在 0~99 之间)
function generateCaptcha() {
let op1, op2, operator, result;
let attempts = 0;
const maxAttempts = 50;
do {
// 随机决定加减: 0 => 加法, 1 => 减法
const isAdd = Math.random() < 0.5;
operator = isAdd ? '+' : '-';
if (isAdd) {
// 加法: 范围 0~99, 但让每一位都在 0~50 左右, 使结果一般不超过99, 也更适合小学生
op1 = randomInt(0, 60);
op2 = randomInt(0, 40);
result = op1 + op2;
// 如果结果超过99, 重新调整 (限制结果范围)
if (result > 99) {
// 重新生成较小的数字
op1 = randomInt(0, 50);
op2 = randomInt(0, 49);
result = op1 + op2;
if (result > 99) {
// 极端情况修正, 强制结果在99内
op1 = randomInt(10, 50);
op2 = randomInt(0, 49);
result = op1 + op2;
if (result > 99) op1 = 40; op2 = 30; result = 70; // fallback
}
}
} else {
// 减法: 保证非负, 且结果小于等于99 (自然满足)
op1 = randomInt(0, 99);
op2 = randomInt(0, op1); // 确保结果 >= 0
result = op1 - op2;
// 但有可能 op1 很小, 结果 0~10, 可以接受, 但是为了变化更丰富, 偶尔调整让 op1 稍大
if (op1 < 15 && Math.random() < 0.4) {
op1 = randomInt(20, 80);
op2 = randomInt(0, op1);
result = op1 - op2;
}
}
// 确保 result 在 0~99 之间 (安全防护)
if (result < 0) result = 0;
if (result > 99) result = 99;
attempts++;
// 如果尝试太多次仍然结果越界，用简单兜底
if (attempts > maxAttempts) {
op1 = 25; op2 = 18; operator = '+'; result = 43;
break;
}
} while (result < 0 || result > 99); // 理论上不会, 但保险
// 更新当前验证码对象
currentCaptcha.operand1 = op1;
currentCaptcha.operand2 = op2;
currentCaptcha.operator = operator;
currentCaptcha.result = result;
// 更新UI
equationDisplay.textContent = `${op1} ${operator} ${op2}`;
resultBadge.textContent = '?';
userInput.value = '';
feedbackEl.textContent = '🔍 输入答案，点击验证';
feedbackEl.className = 'feedback'; // 移除correct/wrong样式
userInput.focus();
}
// 验证用户答案
function verifyAnswer() {
const rawValue = userInput.value.trim();
if (rawValue === '') {
feedbackEl.textContent = '⚠️ 请先输入答案';
feedbackEl.className = 'feedback wrong';
return;
}
const userAnswer = Number(rawValue);
if (isNaN(userAnswer)) {
feedbackEl.textContent = '❌ 请输入有效数字';
feedbackEl.className = 'feedback wrong';
return;
}
const correct = currentCaptcha.result;
if (userAnswer === correct) {
feedbackEl.textContent = `✅ 正确！ 太棒了！ (${currentCaptcha.operand1} ${currentCaptcha.operator} ${currentCaptcha.operand2} = ${correct})`;
feedbackEl.className = 'feedback correct';
// 可选自动刷新? 不自动, 让用户手动换题
} else {
feedbackEl.textContent = `❌ 不正确，再试试 (正确答案是 ${correct})`;
feedbackEl.className = 'feedback wrong';
}
}
// 显示答案 (但不破坏验证状态)
function showAnswer() {
const correct = currentCaptcha.result;
resultBadge.textContent = correct;
feedbackEl.textContent = `💡 答案为 ${correct}，可继续验证或换一题`;
feedbackEl.className = 'feedback';
// 但保留输入框内容，方便对比
}
// 重置反馈与UI (新题目时调用)
function resetFeedback() {
feedbackEl.textContent = '✨ 新题目，输入答案吧';
feedbackEl.className = 'feedback';
resultBadge.textContent = '?';
}
// 换一题 (生成新验证码)
function refreshCaptcha() {
generateCaptcha();
resetFeedback();
// 额外清除答案显示
userInput.value = '';
}
// --- 事件绑定 ---
newCaptchaBtn.addEventListener('click', function() {
refreshCaptcha();
});
verifyBtn.addEventListener('click', function() {
verifyAnswer();
});
showAnswerBtn.addEventListener('click', function() {
showAnswer();
});
// 键盘支持: 回车触发验证
userInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
verifyAnswer();
}
});
// 输入时清除错误样式 (可选)
userInput.addEventListener('input', function() {
if (feedbackEl.classList.contains('wrong') || feedbackEl.classList.contains('correct')) {
feedbackEl.className = 'feedback';
feedbackEl.textContent = '✏️ 修改答案后点击验证';
}
// 如果用户开始修改, 把结果问号显示(? 但保留显示答案时可能显示数字, 再改回来?)
// 如果之前显示过答案, 用户修改时把结果恢复成 ?
if (resultBadge.textContent !== '?') {
// 但仅当显示的是数字时重置为问号, 更符合直觉
const val = resultBadge.textContent;
if (val !== '?' && !isNaN(Number(val))) {
resultBadge.textContent = '?';
}
}
});
// 初始化: 加载后直接生成第一题
(function init() {
generateCaptcha();
feedbackEl.textContent = '🔢 输入答案，点击验证';
userInput.value = '';
})();
// 额外: 点击卡片空白处聚焦输入
document.querySelector('.captcha-box')?.addEventListener('click', function(e) {
if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'BUTTON') {
userInput.focus();
}
});
})();
</script>
</body>
</html>
验证码生成与验证逻辑
您可以通过输入答案来测试计算能力，或使用控制按钮切换题目,其核心逻辑围绕随机算式生成与答案校验展开。
- 算式生成：每次点击“换一题”按钮，脚本会随机生成两个正整数（0-99之间），并随机选择加法或减法，确保计算结果在0-99的范围内。
- 交互与验证：您在输入框中填写答案后，点击“验证”按钮或按回车键，系统会立即比对答案并给出“正确”或“错误”的反馈，您也可以点击“答案”按钮查看当前题目的正确结果。
- 状态反馈：界面底部的反馈区域会清晰显示操作提示和验证结果，并通过颜色变化（绿/红）直观区分正确与错误。
