本文介绍一种高效、可扩展的 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 += `
      ${firstNumber} ${operator} ${secondNumber}
      = ${ans}
    `;
  }

  elCol.innerHTML = html; // ✅ 仅一次 DOM 写入，性能最优
};

使用示例（支持多列、多难度、多运算）：

基础加法（100以内）


进阶乘法（100以内）


挑战除法（1000以内）

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 控制间距与视觉层次，告别
  
  
  等反模式写法。

此方案既满足教学场景下“题目+答案即时呈现”的核心需求，又为后续扩展（如添加用户答题验证、计时器、错题统计）奠定了清晰、可维护的代码基础。