本文介绍一种高效、可扩展的 javascript 方案，通过单个函数生成带答案的随机数学题（支持加、减、乘、除），避免重复代码与 dom 频繁操作，并推荐语义化 html 与 css 控制布局。
在生成练习题工作表时，核心挑战在于：确保每道题与其对应答案严格匹配，且答案实时、准确地渲染在用户可见的题目旁。原始代码中将 innerHTML += 在循环内反复调用，不仅性能低下（触发多次重排重绘），更因 ans 计算与 HTML 拼接分离，导致逻辑错位——答案常对应“下一道题”，而非当前显示的题目。
解决方案是采用 “一次构建、批量插入” 策略：先在内存中拼接完整 HTML 字符串，最后统一写入 DOM；同时将运算符（+, -, *, /）作为参数传入，使函数具备通用性。以下是优化后的完整实现：
const createWorksheet = (selector, totalQuestions = 10, difficulty = 100, operator = "+") => {
const elCol = document.querySelector(selector);
if (!elCol) return; // 安全防护：元素不存在则退出
let html = "";
for (let i = 0; i < totalQuestions; i++) {
const firstNumber = Math.round(Math.random() * difficulty + 100);
let secondNumber, ans;
// 根据运算符动态生成第二操作数与结果
switch (operator) {
case "+":
secondNumber = Math.round(Math.random() * difficulty + 100);
ans = firstNumber + secondNumber;
break;
case "-":
secondNumber = Math.round(Math.random() * Math.min(firstNumber, difficulty) + 1); // 避免负数结果（可选）
ans = firstNumber - secondNumber;
break;
case "*":
secondNumber = Math.round(Math.random() * Math.min(10, difficulty / 100) + 1); // 控制乘积规模
ans = firstNumber * secondNumber;
break;
case "/":
// 为保证整除且结果合理，先生成商和除数，再反推被除数
const quotient = Math.round(Math.random() * 10 + 1);
secondNumber = Math.round(Math.random() * Math.min(10, difficulty / 10) + 1);
ans = quotient;
firstNumber = quotient * secondNumber; // 确保整除
break;
default:
throw new Error(`Unsupported operator: ${operator}`);
}
html += `${firstNumber} ${operator} ${secondNumber} = ${ans}`;
}
elCol.innerHTML = html;
};
// 使用示例：一键生成多列不同难度、不同运算的题目
createWorksheet("#column-easy", 10, 10, "+");
createWorksheet("#column-medium", 10, 100, "*");
createWorksheet("#column-difficult", 10, 1000, "/");配套 CSS（推荐使用类名控制样式，替代
）：
.calc {
padding: 0.6rem 0;
font-family: "Segoe UI", system-ui, sans-serif;
line-height: 1.5;
border-bottom: 1px solid #eee;
}
.calc:last-child {
border-bottom: none;
}HTML 结构（语义清晰，便于维护）：
基础加法（100以内）
进阶乘法（百位内）
挑战除法（整除）
✅ 关键优势总结：
- ✅ 答案零偏差：每道题的 firstNumber、secondNumber 与 ans 在同一作用域内同步计算并拼入 HTML，杜绝错位；
- ✅ 高度复用：单函数支持四则运算，仅需变更 operator 参数，无需复制粘贴逻辑；
- ✅ 性能友好：仅一次 DOM 写入，大幅减少浏览器重排压力；
- ✅ 可维护性强：CSS 控制间距与样式，HTML 专注结构，JavaScript 专注逻辑，职责分明。
⚠️ 注意：除法示例中采用「先定商与除数，再反推被除数」策略，确保结果恒为整数且符合教学需求；如需支持小数或余数，可扩展 operator 类型（如 "÷r" 表示带余除法）并调整计算逻辑。
