JavaScript 九九乘法表

2024-02-05 08:20:16

如何使用 JS 打印九九乘法表？

九九乘法表是小学阶段的基础知识，也是计算机编程的经典入门练习之一。使用 JS 打印九九乘法表可以让你快速入门 JS，掌握 JS 的基本语法和概念。下面，我们就来一步一步地学习如何使用 JS 打印九九乘法表：

步骤 1：创建 HTML 文档

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>九九乘法表</h1>
  <table id="multiplication-table"></table>
</body>
</html>

步骤 2：在 HTML 文档中添加 JavaScript 代码

// 获取九九乘法表表格元素
const table = document.getElementById('multiplication-table');

// 创建一个二维数组来存储九九乘法表的数据
const multiplicationTable = [];

// 填充九九乘法表数据
for (let i = 1; i <= 9; i++) {
  const row = [];
  for (let j = 1; j <= 9; j++) {
    row.push(i * j);
  }
  multiplicationTable.push(row);
}

// 将九九乘法表数据添加到表格中
for (let i = 0; i < 9; i++) {
  const row = table.insertRow();
  for (let j = 0; j < 9; j++) {
    const cell = row.insertCell();
    cell.innerHTML = multiplicationTable[i][j];
  }
}

步骤 3：运行 HTML 文档

将 HTML 文档保存为一个文件，然后在浏览器中打开。你会看到一个九九乘法表表格，其中包含了从 1 到 9 的所有乘法结果。

代码讲解

在步骤 1 中，我们创建了一个 HTML 文档，其中包含了一个表格元素。表格元素的 ID 为 multiplication-table，它将用于显示九九乘法表。
在步骤 2 中，我们向 HTML 文档中添加了 JavaScript 代码。JavaScript 代码首先获取了九九乘法表表格元素，然后创建了一个二维数组来存储九九乘法表的数据。接下来，JavaScript 代码填充了九九乘法表数据，并将数据添加到表格中。
在步骤 3 中，我们运行 HTML 文档。你会看到一个九九乘法表表格，其中包含了从 1 到 9 的所有乘法结果。

运行结果

九九乘法表
1 2 3 4 5 6 7 8 9
2 4 6 8 10 12 14 16 18
3 6 9 12 15 18 21 24 27
4 8 12 16 20 24 28 32 36
5 10 15 20 25 30 35 40 45
6 12 18 24 30 36 42 48 54
7 14 21 28 35 42 49 56 63
8 16 24 32 40 48 56 64 72
9 18 27 36 45 54 63 72 81