本文介绍一种高效、可扩展的 javascript 方案，通过单个函数生成带答案的加减乘除随机算术题，避免重复代码与 dom 频繁操作，并利用 css 替代冗余 `
` 标签实现整洁排版。
要真正解决“答案与题目不匹配”这一常见问题，关键在于：确保每个题目的答案在生成该题目的同一轮循环中实时计算并拼入 HTML 字符串，而非延迟赋值或跨循环引用。原始代码中 ans 变量被声明但未在每次循环内赋值，导致其值滞后于当前题目；同时，反复修改 innerHTML 会引发多次重排重绘，性能低下。
以下是一个优化后的通用函数 createWorksheet()，它支持四种基本运算（+, -, *, /），并通过参数灵活控制题目数量、数值范围和运算类型：
const createWorksheet = (selector, totalQuestions = 10, difficulty = 100, operator = "+") => {
const elCol = document.querySelector(selector);
let html = "";
for (let i = 0; i < totalQuestions; i++) {
// 生成两个随机整数（避免除零及小数结果干扰）
const firstNumber = Math.floor(Math.random() * difficulty) + 1;
const secondNumber = operator === "/"
? Math.floor(Math.random() * (difficulty / 2)) + 1 // 保证除数 ≥ 1
: Math.floor(Math.random() * difficulty) + 1;
// 根据运算符计算答案（注意除法保留两位小数，避免无限循环小数）
let ans;
switch (operator) {
case "+": ans = firstNumber + secondNumber; break;
case "-": ans = firstNumber - secondNumber; break;
case "*": ans = firstNumber * secondNumber; break;
case "/":
ans = parseFloat((firstNumber / secondNumber).toFixed(2));
break;
default: throw new Error(`Unsupported operator: ${operator}`);
}
// 拼接结构化 HTML 片段（含题目与答案）
html += `<div class="calc">
<span class="question">${firstNumber} ${operator} ${secondNumber}</span>
<span class="answer">= ${ans}</span>
</div>`;
}
elCol.innerHTML = html; // ✅ 仅一次 DOM 写入，性能最优
};使用示例（支持多列、多难度、多运算）：
<h3>基础加法（100以内）</h3> <div id="column-easy"></div> <h3>进阶乘法（100以内）</h3> <div id="column-medium"></div> <h3>挑战除法（1000以内）</h3> <div id="column-difficult"></div>
createWorksheet("#column-easy", 10, 100, "+");
createWorksheet("#column-medium", 10, 100, "*");
createWorksheet("#column-difficult", 10, 1000, "/");配套 CSS（语义化、易维护）：
.calc {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem 0;
border-bottom: 1px solid #eee;
font-family: "Segoe UI", sans-serif;
}
.calc .question { font-weight: 600; }
.calc .answer { color: #2a75ff; font-weight: bold; }✅ 关键改进点总结：
- 答案同步性：每道题的 ans 在生成对应数字后立即计算，杜绝“答案错位”；
- 运算符可扩展：通过 operator 参数解耦逻辑，新增运算（如 % 或幂运算）只需扩展 switch 分支；
- 健壮性增强：除法时限制除数 ≥ 1，避免 NaN；结果统一格式化，提升可读性；
- 性能优化：仅一次 innerHTML 赋值，避免 10 次 DOM 操作；
-
样式现代化：用 CSS 控制间距与视觉层次，告别
等反模式写法。
此方案既满足教学场景下“题目+答案即时呈现”的核心需求，又为后续扩展（如添加用户答题验证、计时器、错题统计）奠定了清晰、可维护的代码基础。
