原生 JavaScript 实现九九乘法表

效果展示

最终实现的网页效果将呈现一个标准的九宫格形式排列的乘法表。页面加载后，浏览器会自动根据脚本生成对应的算式格子，整齐排列。以下是生成的实际页面截图：

准备条件与思路

实现该功能无需依赖任何第三方库，仅使用浏览器内置的原生 JavaScript API 即可完成。核心逻辑如下：

1. 确定容器：获取页面的 <body> 元素作为挂载点。
2. 定义循环：外层循环控制行数（1 到 9），内层循环控制列数（1 到当前行数）。
3. 动态创建：在每次内层循环中，创建一个 <div> 元素用于显示算式。
4. 注入内容：计算乘积并将文本填入元素，最后追加到容器中。

第 1 步：设置全局样式与清除边距

由于默认情况下浏览器对 p 标签或其他块级元素的渲染包含默认的 margin 和 padding，直接生成的方块可能会有不必要的行间距。为了保证排版紧凑对齐，建议在 CSS 中对通配符进行重置。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

第 2 步：编写 DOM 生成逻辑

在 <script> 标签中编写核心脚本。首先定义一个包裹层 wrap，以方便后续扩展样式。随后执行嵌套循环，构建每一个乘法单元。

<script type="text/javascript">
  // 1. 获取 body 并在其中创建 wrap 容器
  var body = document.getElementsByTagName('body')[0];
  var wrap = document.createElement('div');
  wrap.id = 'mul-table-wrap'; // 建议使用描述性 ID
  body.appendChild(wrap);

  // 2. 双重循环生成九九乘法表
  for (var i = 1; i < 10; i++) {       // 行：1 到 9
    for (var j = 1; j <= i; j++) {    // 列：1 到当前行号

      // 3. 创建单个算式格子
      var cell = document.createElement('div'); 
      
      // 4. 设置格子样式 (CSS In JS 方式)
      cell.style.width = '80px';       // 适当宽度以适应算式长度
      cell.style.height = '30px';
      cell.style.lineHeight = '30px';  // 文字垂直居中
      cell.style.backgroundColor = '#f9f9f9';
      cell.style.display = 'inline-block'; // 允许同行并排
      cell.style.border = '1px solid #ccc';
      cell.style.textAlign = 'center';   // 文字水平居中
      
      // 5. 拼接算式文本 (例如: 2*3=6)
      cell.innerHTML = j + " * " + i + " = " + (j * i);
      
      // 6. 将格子加入 wrap
      wrap.appendChild(cell);
    }
    // 7. 换行处理：虽然 display:inline-block 配合 div 不会自动换行
    // 但为了兼容更简单的布局或确保每行结束，可以手动添加
或使用 flexbox
    // 这里采用原逻辑保留换行符号以保持原始结构一致性
    var br = document.createElement('br');
    wrap.appendChild(br);
  }
</script>

完成判断与注意事项

• 视觉对齐：如果使用现代 CSS Flexbox 替代上述 break 换行方案，排版会更加灵活且易于响应式适配。但在简单 Demo 中，上述方法足以呈现结果。
• 样式优化：生产环境中建议将行内样式剥离至 CSS 类中（如 .cell-item），以提高可维护性。
• 浏览器兼容性：以上语法兼容所有主流现代浏览器及 IE9+。

简要总结

以上就是通过原生 JavaScript 和 DOM 接口实现九九乘法表的详细内容。该方法展示了基础的遍历逻辑与页面动态渲染能力，更多关于前端 DOM 操作的资料请关注本站其它相关文章！