课程设计HTML+JS：口算题目生成器_html+js自动生成数学题目头部-CSDN博客

本文链接：https://blog.csdn.net/qq_33877849/article/details/145817294

在这里插入图片描述

如何设计一个简约高效的数学题目生成器网页

在现代教育中，数学题目的生成和练习是学生学习的重要环节。为了帮助教师和学生更方便地生成和打印数学题目，我们可以设计一个简约高效的数学题目生成器网页。本文将详细介绍如何实现这一功能，包括网页的设计、功能实现以及打印优化。

一、网页设计

1. 配色方案

我们采用简约的配色方案，确保页面美观且易于使用：

背景色：浅灰色（#F5F5F5），避免视觉疲劳。
容器背景：白色（#FFFFFF），突出内容区域。
按钮和表头：蓝色（#007BFF），增强交互感。
文字颜色：深灰色（#333333），确保可读性。

2. 布局

居中布局：内容区域居中显示，宽度为 1200px，适合大多数屏幕。
按钮和输入框：位于页面顶部，方便用户操作。
表格：题目以表格形式展示，每行五列，布局整齐。

二、功能实现

1. 动态生成题目

用户可以选择加、减、乘、除四种运算类型，并动态生成题目。具体实现如下：

运算类型按钮：点击按钮后，直接生成相应类型的题目。
行数和列数输入框：用户可以自定义生成题目的行数和列数。
题目生成逻辑：
- 加法：生成两个随机数相加的题目。
- 减法：生成两个随机数相减的题目。
- 乘法：生成两个随机数相乘的题目。
- 除法：确保除数和被除数整除，避免小数。

2. 打印功能

为了方便用户打印题目，我们设计了以下功能：

打印按钮：点击“打印题目”按钮后，触发浏览器的打印功能。
打印样式优化：
- 隐藏不需要打印的元素（如按钮、Footer 和标题）。
- 去掉容器的阴影、内边距和圆角，使打印效果更简洁。
- 表格在打印时使用黑色边框，表头背景为白色，文字为黑色，确保打印效果清晰。

三、代码实现

以下是核心代码的实现：

1. HTML 结构

<div class="container">
    <h1>数学题目生成器</h1>
    <div class="controls">
        <button onclick="setOperation('add')" class="active">加法</button>
        <button onclick="setOperation('subtract')">减法</button>
        <button onclick="setOperation('multiply')">乘法</button>
        <button onclick="setOperation('divide')">除法</button>
        <label for="rows">行数：</label>
        <input type="number" id="rows" value="10" min="1" max="50">
        <label for="cols">列数：</label>
        <input type="number" id="cols" value="5" min="1" max="10">
        <button onclick="window.print()">打印题目</button>
    </div>
    <table id="questionsTable">
        <thead>
            <tr id="tableHeader"></tr>
        </thead>
        <tbody id="questionsBody"></tbody>
    </table>
</div>
<footer>
    &copy; 2023 数学题目生成器 | Designed with ❤️
</footer>

2. CSS 样式

body {
    font-family: 'Roboto', sans-serif;
    background-color: #F5F5F5;
    color: #333333;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1200px;
    text-align: center;
}

.controls button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    margin: 5px;
    background-color: #007BFF;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 12px;
    text-align: center;
    font-size: 16px;
}

@media print {
    .controls, footer, h1 {
        display: none;
    }
    .container {
        box-shadow: none;
        padding: 0;
        border-radius: 0;
    }
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #000000;
        padding: 8px;
        font-size: 14px;
    }
    th {
        background-color: #FFFFFF;
        color: #000000;
    }
}

3. JavaScript 逻辑

let currentOperation = 'add';

window.onload = function() {
    generateQuestions();
};

document.getElementById('rows').addEventListener('input', generateQuestions);
document.getElementById('cols').addEventListener('input', generateQuestions);

function setOperation(operation) {
    currentOperation = operation;
    generateQuestions();
    document.querySelectorAll('.controls button').forEach(button => {
        button.classList.remove('active');
    });
    document.querySelector(`button[onclick="setOperation('${operation}')"]`).classList.add('active');
}

function generateQuestions() {
    const rows = parseInt(document.getElementById('rows').value);
    const cols = parseInt(document.getElementById('cols').value);
    const questionsBody = document.getElementById('questionsBody');
    const tableHeader = document.getElementById('tableHeader');
    questionsBody.innerHTML = '';
    tableHeader.innerHTML = '';

    for (let i = 1; i <= cols; i++) {
        const th = document.createElement('th');
        th.textContent = `题目 ${i}`;
        tableHeader.appendChild(th);
    }

    let questions = [];
    for (let i = 0; i < rows * cols; i++) {
        let num1 = Math.floor(Math.random() * 100) + 1;
        let num2 = Math.floor(Math.random() * 100) + 1;
        let question = '';

        switch (currentOperation) {
            case 'add':
                question = `${num1} + ${num2} = `;
                break;
            case 'subtract':
                question = `${num1} - ${num2} = `;
                break;
            case 'multiply':
                question = `${num1} × ${num2} = `;
                break;
            case 'divide':
                num2 = Math.floor(Math.random() * 10) + 1;
                num1 = num2 * (Math.floor(Math.random() * 10) + 1);
                question = `${num1} ÷ ${num2} = `;
                break;
        }
        questions.push(question);
    }

    for (let i = 0; i < questions.length; i += cols) {
        const row = document.createElement('tr');
        for (let j = 0; j < cols; j++) {
            const cell = document.createElement('td');
            cell.textContent = questions[i + j] || '';
            row.appendChild(cell);
        }
        questionsBody.appendChild(row);
    }
}