脚本如何生成算术验证码

<!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的范围内。
• 交互与验证：您在输入框中填写答案后，点击“验证”按钮或按回车键，系统会立即比对答案并给出“正确”或“错误”的反馈，您也可以点击“答案”按钮查看当前题目的正确结果。
• 状态反馈：界面底部的反馈区域会清晰显示操作提示和验证结果，并通过颜色变化（绿/红）直观区分正确与错误。