<!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>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Comic Sans MS', '楷体', sans-serif;background: linear-gradient(135deg, #e0f7fa 0%, #bbdefb 100%);min-height: 100vh;padding: 20px;}.container {max-width: 1000px;margin: 0 auto;background: white;border-radius: 20px;box-shadow: 0 10px 30px rgba(0,0,0,0.1);padding: 30px;border: 3px solid #4fc3f7;}.header {text-align: center;margin-bottom: 30px;}.header h1 {color: #0288d1;font-size: 2.5em;text-shadow: 2px 2px 4px rgba(0,0,0,0.1);margin-bottom: 10px;}.header p {color: #666;font-size: 1.2em;}.student-info {background: linear-gradient(45deg, #4fc3f7, #0288d1);color: white;padding: 10px 20px;border-radius: 25px;margin-bottom: 15px;display: inline-block;box-shadow: 0 4px 8px rgba(0,0,0,0.1);}.student-name, .student-id {font-weight: bold;font-size: 1.1em;margin: 0 10px;}.controls {display: flex;justify-content: center;gap: 20px;margin-bottom: 30px;flex-wrap: wrap;}.btn {padding: 12px 25px;border: none;border-radius: 50px;font-size: 1.1em;font-weight: bold;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 4px 8px rgba(0,0,0,0.1);}.btn-primary {background: linear-gradient(45deg, #4fc3f7, #0288d1);color: white;}.btn-primary:hover {transform: translateY(-2px);box-shadow: 0 6px 12px rgba(0,0,0,0.2);}.btn-secondary {background: linear-gradient(45deg, #ffb74d, #f57c00);color: white;}.btn-print {background: linear-gradient(45deg, #66bb6a, #2e7d32);color: white;}.exercises-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap: 20px;margin-bottom: 30px;}.exercise-card {background: #f8f9fa;border: 2px solid #e3f2fd;border-radius: 15px;padding: 15px;text-align: center;transition: all 0.3s ease;}.exercise-card:hover {transform: translateY(-3px);box-shadow: 0 5px 15px rgba(0,0,0,0.1);border-color: #4fc3f7;}.problem {font-size: 1.3em;font-weight: bold;color: #333;margin-bottom: 10px;}.answer-input {width: 80px;padding: 8px;border: 2px solid #b3e5fc;border-radius: 8px;text-align: center;font-size: 1.1em;outline: none;}.answer-input:focus {border-color: #4fc3f7;box-shadow: 0 0 5px rgba(79, 195, 247, 0.5);}.score-display {text-align: center;font-size: 1.2em;color: #0288d1;font-weight: bold;margin-top: 20px;padding: 15px;background: #e3f2fd;border-radius: 10px;}.correct {border-color: #66bb6a !important;background-color: #e8f5e8 !important;}.incorrect {border-color: #f44336 !important;background-color: #ffebee !important;}.wrong-questions {margin-top: 30px;padding: 20px;background: #fff3e0;border-radius: 15px;border: 2px solid #ffb74d;display: none;}.wrong-questions h3 {color: #f57c00;margin-bottom: 15px;text-align: center;}.wrong-list {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 10px;}.wrong-item {background: white;padding: 10px;border-radius: 8px;border-left: 4px solid #f57c00;}.wrong-problem {font-weight: bold;margin-bottom: 5px;}.wrong-answer {color: #666;font-size: 0.9em;}.wrong-user-answer {color: #f44336;font-size: 0.9em;}@media print {.controls, .btn {display: none !important;}.container {box-shadow: none;border: none;}.answer-input {border: 1px solid #ccc;background: transparent !important;}}.animation {animation: bounce 0.5s ease;}@keyframes bounce {0%, 20%, 60%, 100% {transform: translateY(0);}40% {transform: translateY(-10px);}80% {transform: translateY(-5px);}}</style>
</head>
<body><div class="container"><div class="header"><h1>🧮 小学生口算题卡</h1><p>每次生成50道口算题，锻炼计算能力！</p></div><div class="controls"><button class="btn btn-primary" onclick="generateExercises()">🎯 生成新题目</button><button class="btn btn-secondary" onclick="checkAnswers()">✅ 检查答案</button><button class="btn btn-print" onclick="window.print()">🖨️ 打印题目</button><button class="btn" onclick="showWrongQuestions()" style="background: linear-gradient(45deg, #ff9800, #f57c00); color: white;">📝 查看错题本</button></div><div id="exercisesContainer" class="exercises-grid"><!-- 题目将在这里生成 --></div><div id="scoreDisplay" class="score-display">等待生成题目...</div><div id="wrongQuestions" class="wrong-questions"><h3>📚 错题本</h3><div id="wrongList" class="wrong-list"><!-- 错题将在这里显示 --></div><div style="text-align: center; margin-top: 15px;"><button class="btn" onclick="hideWrongQuestions()" style="background: #9e9e9e; color: white; padding: 8px 16px;">关闭错题本</button></div></div></div><script>let currentExercises = [];let wrongQuestions = []; // 存储错题// 生成随机整数function getRandomInt(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;}// 生成单个口算题function generateSingleExercise() {const types = ['addition', 'subtraction', 'multiplication', 'division'];const type = types[getRandomInt(0, 3)];let a, b, problem, answer;switch(type) {case 'addition':a = getRandomInt(1, 100);b = getRandomInt(1, 100);problem = `${a} + ${b} = `;answer = a + b;break;case 'subtraction':a = getRandomInt(1, 100);b = getRandomInt(1, a); // 确保结果为正数problem = `${a} - ${b} = `;answer = a - b;break;case 'multiplication':a = getRandomInt(2, 9); // 乘数从2开始，避免1×1b = getRandomInt(2, 9); // 乘数从2开始，避免1×1problem = `${a} × ${b} = `;answer = a * b;break;case 'division':b = getRandomInt(2, 9); // 除数从2开始，避免÷1answer = getRandomInt(2, 9); // 商从2开始，避免÷1a = b * answer; // 确保整除problem = `${a} ÷ ${b} = `;break;}return { problem, answer, userAnswer: null };}// 生成50道口算题function generateExercises() {currentExercises = [];const container = document.getElementById('exercisesContainer');container.innerHTML = '';for (let i = 0; i < 50; i++) {const exercise = generateSingleExercise();currentExercises.push(exercise);const card = document.createElement('div');card.className = 'exercise-card';card.innerHTML = `<div class="problem">${exercise.problem}</div><input type="number" class="answer-input" placeholder="答案" oninput="updateAnswer(${i}, this.value)"min="0" step="1">`;container.appendChild(card);}document.getElementById('scoreDisplay').textContent = '50道题目已生成！请开始答题，完成后点击"检查答案"按钮。';// 添加动画效果const cards = document.querySelectorAll('.exercise-card');cards.forEach((card, index) => {setTimeout(() => {card.classList.add('animation');setTimeout(() => card.classList.remove('animation'), 500);}, index * 50);});}// 更新用户答案function updateAnswer(index, value) {if (currentExercises[index]) {currentExercises[index].userAnswer = value ? parseInt(value) : null;}}// 检查答案function checkAnswers() {let correctCount = 0;const inputs = document.querySelectorAll('.answer-input');wrongQuestions = []; // 清空之前的错题记录inputs.forEach((input, index) => {const exercise = currentExercises[index];if (exercise && exercise.userAnswer !== null) {if (exercise.userAnswer === exercise.answer) {input.parentElement.classList.add('correct');input.parentElement.classList.remove('incorrect');correctCount++;} else {input.parentElement.classList.add('incorrect');input.parentElement.classList.remove('correct');// 记录错题wrongQuestions.push({problem: exercise.problem,correctAnswer: exercise.answer,userAnswer: exercise.userAnswer});}} else {input.parentElement.classList.remove('correct', 'incorrect');}});const score = Math.round((correctCount / 50) * 100);let message = `完成情况：${correctCount}/50 题正确 (`;if (score >= 90) {message += `🎉 优秀！${score}分`;} else if (score >= 70) {message += `👍 良好！${score}分`;} else if (score >= 60) {message += `😊 及格！${score}分`;} else {message += `💪 加油！${score}分`;}message += ')';if (wrongQuestions.length > 0) {message += ` | 有 ${wrongQuestions.length} 道错题，点击"查看错题本"复习`;}document.getElementById('scoreDisplay').textContent = message;}// 显示错题本function showWrongQuestions() {const wrongContainer = document.getElementById('wrongQuestions');const wrongList = document.getElementById('wrongList');if (wrongQuestions.length === 0) {wrongList.innerHTML = '<div style="text-align: center; color: #666;">暂无错题记录，继续加油！💪</div>';} else {wrongList.innerHTML = wrongQuestions.map((item, index) => `<div class="wrong-item"><div class="wrong-problem">${item.problem}</div><div class="wrong-answer">正确答案：${item.correctAnswer}</div><div class="wrong-user-answer">你的答案：${item.userAnswer}</div></div>`).join('');}wrongContainer.style.display = 'block';wrongContainer.scrollIntoView({ behavior: 'smooth' });}// 隐藏错题本function hideWrongQuestions() {document.getElementById('wrongQuestions').style.display = 'none';}// 页面加载时自动生成题目window.onload = generateExercises;// 添加键盘快捷键document.addEventListener('keydown', function(event) {if (event.ctrlKey && event.key === 'Enter') {generateExercises();} else if (event.ctrlKey && event.key === ' ') {checkAnswers();}});</script>
</body>
</html>