目录
专栏导读
🌸 欢迎来到Python办公自动化专栏—Python处理办公问题，解放您的双手
🏳️🌈 博客主页：请点击——> 一晌小贪欢的博客主页求关注
👍 该系列文章专栏：请点击——>Python办公自动化专栏求订阅
🕷 此外还有爬虫专栏：请点击——>Python爬虫基础专栏求订阅
📕 此外还有python基础专栏：请点击——>Python基础学习专栏求订阅
文章作者技术和水平有限，如果文中出现错误，希望大家能指正🙏
❤️ 欢迎各位佬关注！ ❤️
🧮 HTML数学题目生成器 - 让数学练习更简单
项目简介
这是一个基于纯HTML、CSS和JavaScript开发的数学题目生成器，专门为小学生设计，能够自动生成100以内的加减乘除练习题。该工具支持多种运算类型组合，具有现代化的用户界面，并针对A4纸打印进行了优化。
✨ 核心功能
🎯 灵活的运算类型选择
- 多选支持：用户可以同时选择多种运算类型
- 智能组合：支持加减法组合、乘除法组合或任意搭配
- 实时切换：点击按钮即可选择/取消运算类型
- 保护机制：确保至少选择一种运算类型
📊 智能题目生成算法
- 加法：确保结果不超出设定的数值范围
- 减法：保证被减数大于减数，结果为正数
- 乘法：智能控制乘数大小，避免结果超出范围
- 除法：生成整除题目，确保结果为整数
- 随机分布：从选中的运算类型中随机选择，保证题目多样性
⚙️ 个性化参数设置
- 题目数量：1-100题可调节
- 数值范围：10-100可自定义
- 参数验证：实时检查输入有效性
🖨️ 专业打印优化
- A4纸适配：专门针对A4纸张优化的布局
- 双列显示：打印时自动调整为两列布局，节省纸张
- 页面控制：避免题目跨页断开，保持完整性
- 简洁输出：打印时隐藏控制界面，只显示纯净的题目
🎨 用户体验设计
现代化界面
- 渐变色彩：采用蓝紫色渐变，视觉效果优雅
- 圆角设计：所有按钮和卡片都采用圆角设计，更加友好
- 响应式布局：适配不同屏幕尺寸，支持移动端访问
交互体验
- 悬停效果：按钮悬停时有颜色变化反馈
- 状态提示：选中的运算类型会高亮显示
- 平滑滚动：生成题目后自动滚动到题目区域
- 一键操作：生成、重新生成、打印功能一键完成
🛠️ 技术实现
前端技术栈
- HTML5：语义化标签，结构清晰
- CSS3：Flexbox布局，渐变效果，媒体查询
- 原生JavaScript：无依赖，轻量级实现
核心算法
// 智能题目生成算法示例
function generateSingleQuestion(operation, maxNum) {
let num1, num2, question, answer;
switch(operation) {
case '+':
num1 = getRandomNumber(1, maxNum - 1);
num2 = getRandomNumber(1, maxNum - num1);
question = `${num1} + ${num2} = `;
break;
// ... 其他运算类型
}
return { question, answer };
}
多选运算类型实现
// 支持多选的运算类型管理
let selectedOperations = ['+'];
document.querySelectorAll('.operation-btn').forEach(btn => {
btn.addEventListener('click', function() {
const operation = this.dataset.operation;
if (this.classList.contains('selected')) {
this.classList.remove('selected');
selectedOperations = selectedOperations.filter(op => op !== operation);
} else {
this.classList.add('selected');
selectedOperations.push(operation);
}
});
});
📱 使用方法
- 选择运算类型：点击运算按钮选择需要的类型（可多选）
- 设置参数：调整题目数量和数值范围
- 生成题目：点击"生成题目"按钮
- 打印练习：点击"打印题目"按钮进行打印
🎯 应用场景
- 家庭教育：家长为孩子准备数学练习题
- 学校教学：老师快速生成课堂练习或作业
- 培训机构：批量生成不同难度的练习题
- 自主学习：学生根据需要生成针对性练习
🔧 项目特色
无依赖设计
- 纯原生技术实现，无需任何外部库
- 单文件部署，打开即用
- 兼容性好，支持所有现代浏览器
教育友好
- 符合小学数学教学要求
- 题目难度适中，循序渐进
- 打印格式规范，便于批改
开源免费
- 完全开源，可自由修改和分发
- 代码结构清晰，易于理解和扩展
- 注释详细，便于学习和维护
🚀 未来规划
- 添加答案生成和对照功能
- 支持分数运算
- 增加题目难度分级
- 添加错题统计功能
- 支持题目模板自定义
让数学学习变得更简单，让教学准备更高效！ 🎓
这个项目展示了如何用简单的Web技术解决实际的教育需求，证明了有时候最简单的解决方案往往是最有效的。
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>100以内加减乘除题目生成器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 28px;
margin-bottom: 10px;
}
.header p {
font-size: 16px;
opacity: 0.9;
}
.controls {
padding: 30px;
background: #f8f9fa;
}
.control-group {
margin-bottom: 20px;
}
.control-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #333;
}
.operation-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.operation-btn {
padding: 10px 20px;
border: 2px solid #ddd;
background: white;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
}
.operation-btn:hover {
border-color: #667eea;
color: #667eea;
}
.operation-btn.selected {
background: #667eea;
color: white;
border-color: #667eea;
}
.input-group {
display: flex;
gap: 15px;
align-items: center;
flex-wrap: wrap;
}
.input-group input {
padding: 10px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
width: 100px;
}
.input-group input:focus {
outline: none;
border-color: #667eea;
}
.generate-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 15px 30px;
border-radius: 25px;
font-size: 18px;
cursor: pointer;
transition: transform 0.2s ease;
}
.generate-btn:hover {
transform: translateY(-2px);
}
.questions-container {
padding: 30px;
display: none;
}
.questions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.question-item {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
border-left: 4px solid #667eea;
font-size: 18px;
text-align: center;
}
.print-btn {
background: #28a745;
color: white;
border: none;
padding: 12px 25px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-right: 10px;
}
.print-btn:hover {
background: #218838;
}
.regenerate-btn {
background: #ffc107;
color: #212529;
border: none;
padding: 12px 25px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.regenerate-btn:hover {
background: #e0a800;
}
/* 打印样式 */
@media print {
body {
background: white;
padding: 0;
}
.container {
box-shadow: none;
border-radius: 0;
max-width: none;
}
.header, .controls {
display: none;
}
.questions-container {
display: block !important;
padding: 20px;
}
.questions-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
page-break-inside: avoid;
}
.question-item {
background: white;
border: 1px solid #ddd;
page-break-inside: avoid;
font-size: 16px;
padding: 10px;
}
.print-btn, .regenerate-btn {
display: none;
}
@page {
size: A4;
margin: 2cm;
}
}
.footer {
text-align: center;
padding: 20px;
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🧮 数学题目生成器</h1>
<!-- <p>生成100以内的加减乘除练习题，支持打印</p> -->
</div>
<div class="controls">
<div class="control-group">
<label>选择运算类型（可多选）：</label>
<div class="operation-buttons">
<button class="operation-btn selected" data-operation="+">➕ 加法</button>
<button class="operation-btn" data-operation="-">➖ 减法</button>
<button class="operation-btn" data-operation="*">✖️ 乘法</button>
<button class="operation-btn" data-operation="/">➗ 除法</button>
</div>
</div>
<div class="control-group">
<label>设置参数：</label>
<div class="input-group">
<span>题目数量：</span>
<input type="number" id="questionCount" value="30" min="1" max="100">
<span>数值范围：1 -</span>
<input type="number" id="maxNumber" value="100" min="10" max="100">
</div>
</div>
<div class="control-group">
<button class="generate-btn" onclick="generateQuestions()">🎯 生成题目</button>
</div>
</div>
<div class="questions-container" id="questionsContainer">
<div class="questions-grid" id="questionsGrid"></div>
<div style="text-align: center; margin-top: 20px;">
<button class="print-btn" onclick="printQuestions()">🖨️ 打印题目</button>
<button class="regenerate-btn" onclick="generateQuestions()">🔄 重新生成</button>
</div>
</div>
<!-- <div class="footer">
<p>💡 提示：点击运算类型按钮选择题目类型，设置参数后点击生成题目</p>
</div> -->
</div>
<script>
let selectedOperations = ['+'];
// 运算类型选择（多选）
document.querySelectorAll('.operation-btn').forEach(btn => {
btn.addEventListener('click', function() {
const operation = this.dataset.operation;
if (this.classList.contains('selected')) {
// 如果已选中，则取消选择
this.classList.remove('selected');
selectedOperations = selectedOperations.filter(op => op !== operation);
} else {
// 如果未选中，则添加选择
this.classList.add('selected');
selectedOperations.push(operation);
}
// 确保至少选择一种运算类型
if (selectedOperations.length === 0) {
this.classList.add('selected');
selectedOperations.push(operation);
alert('至少需要选择一种运算类型！');
}
});
});
// 生成随机数
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 生成单个题目
function generateSingleQuestion(operation, maxNum) {
let num1, num2, question, answer;
switch(operation) {
case '+':
num1 = getRandomNumber(1, maxNum - 1);
num2 = getRandomNumber(1, maxNum - num1);
question = `${num1} + ${num2} = `;
answer = num1 + num2;
break;
case '-':
num1 = getRandomNumber(1, maxNum);
num2 = getRandomNumber(1, num1);
question = `${num1} - ${num2} = `;
answer = num1 - num2;
break;
case '*':
num1 = getRandomNumber(1, Math.min(10, Math.floor(Math.sqrt(maxNum))));
num2 = getRandomNumber(1, Math.floor(maxNum / num1));
question = `${num1} × ${num2} = `;
answer = num1 * num2;
break;
case '/':
answer = getRandomNumber(1, Math.min(10, maxNum));
num2 = getRandomNumber(2, Math.floor(maxNum / answer));
num1 = answer * num2;
question = `${num1} ÷ ${num2} = `;
break;
}
return { question, answer };
}
// 生成题目
function generateQuestions() {
const questionCount = parseInt(document.getElementById('questionCount').value);
const maxNumber = parseInt(document.getElementById('maxNumber').value);
const questionsGrid = document.getElementById('questionsGrid');
const questionsContainer = document.getElementById('questionsContainer');
// 验证输入
if (questionCount < 1 || questionCount > 100) {
alert('题目数量应在1-100之间');
return;
}
if (maxNumber < 10 || maxNumber > 100) {
alert('数值范围应在10-100之间');
return;
}
// 清空之前的题目
questionsGrid.innerHTML = '';
// 生成新题目
for (let i = 0; i < questionCount; i++) {
// 从选中的运算类型中随机选择一个
const randomOperation = selectedOperations[Math.floor(Math.random() * selectedOperations.length)];
const { question } = generateSingleQuestion(randomOperation, maxNumber);
const questionDiv = document.createElement('div');
questionDiv.className = 'question-item';
questionDiv.innerHTML = `
<div style="font-size: 18px;">${question}_____</div>
`;
questionsGrid.appendChild(questionDiv);
}
// 显示题目容器
questionsContainer.style.display = 'block';
// 滚动到题目区域
questionsContainer.scrollIntoView({ behavior: 'smooth' });
}
// 打印题目
function printQuestions() {
if (document.getElementById('questionsGrid').children.length === 0) {
alert('请先生成题目再打印');
return;
}
window.print();
}
// 页面加载完成后的初始化
// document.addEventListener('DOMContentLoaded', function() {
// console.log('数学题目生成器已加载完成');
// });
</script>
</body>
</html>
注：
🈲转载请标明出处！！！
🈲转载请标明出处！！！
🈲转载请标明出处！！！
🈲转载请标明出处！！！
希望对初学者有帮助；致力于办公自动化的小小程序员一枚
希望能得到大家的【❤️一个免费关注❤️】感谢！
求个 🤞 关注 🤞 +❤️ 喜欢 ❤️ +👍 收藏 👍
此外还有办公自动化专栏，欢迎大家订阅：Python办公自动化专栏
此外还有爬虫专栏，欢迎大家订阅：Python爬虫基础专栏
此外还有Python基础专栏，欢迎大家订阅：Python基础学习专栏