JavaScript中随机数输出后换行失效问题求助

换行不生效的原因 #

HTML 中，文本里的换行符 \n 只会被解析为普通空格，不会触发换行。要实现换行，必须使用 HTML 的换行标签 <br>。

原代码的其他问题 #

• 循环里连续创建 100 个 setInterval，会在 3 秒后同时输出100个数字，而非逐个依次输出。
• 没有计数逻辑，无法控制每100个数字后换行。

修正后的代码 #

function generateNumber() {
  // 控制每行数量和总输出数量
  const perLine = 100;
  const total = 200; // 两行，共200个
  let count = 0;

  const timer = setInterval(() => {
    if (count >= total) {
      clearInterval(timer); // 达到总数后停止定时器
      return;
    }
    let randomNumber = Math.floor(Math.random() * 10) + 1;
    document.write(randomNumber + " "); // 数字间加空格分隔
    count++;
    // 每输出perLine个数字就换行
    if (count % perLine === 0) {
      document.write("<br>");
    }
  }, 50); // 调整间隔为50ms，输出更流畅，可按需修改
}

function test() {
  generateNumber();
}

test();

代码说明 #

• 使用单个定时器逐个输出数字，避免同时触发大量定时器导致的混乱输出。
• 用count变量计数，每输出100个数字就插入<br>实现换行。
• 达到预设总数量后自动清除定时器，避免无限执行。

内容的提问来源于stack exchange，提问作者Michael V