JavaScript实现九九乘法表的简单实例

以下是“JavaScript实现九九乘法表的简单实例”的完整攻略。

展示九九乘法表

首先，在HTML文件中创建一个表格，用于展示九九乘法表：

<table>
  <thead>
    <tr>
      <th>&times;</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
    </tr>
  </thead>
  <tbody id="tableBody">
  </tbody>
</table>

接着，在JavaScript文件中使用for循环嵌套的方式生成九九乘法表，并将其动态添加到表格中：

const tableBody = document.getElementById('tableBody');
for (let i = 1; i <= 9; i++) {
  const row = document.createElement('tr');
  for (let j = 1; j <= i; j++) {
    const cell = document.createElement('td');
    cell.textContent = `${j} &times; ${i} = ${i*j}`;
    row.appendChild(cell);
  }
  tableBody.appendChild(row);
}

代码解释：

1. 获取用于展示乘法表的tbody元素。
2. 使用外层for循环遍历1-9，表示乘数，内层for循环遍历1-i，表示被乘数。
3. 在内层循环中创建表格单元格（td元素），将相应的乘法结果设置为单元格的文本内容。
4. 将所有的td元素添加到行（tr元素）中。
5. 将每一行的tr元素添加到tbody元素中，最终生成九九乘法表。

示例1：使用CSS为表格添加样式。

你可以通过CSS为表格添加样式，使其更加美观。以下是一些简单的样式示例：

/* 为表头单元格添加样式 */
thead th {
  background-color: #ddd;
  font-weight: bold;
  text-align: center;
  width: 40px;
  height: 40px;
}

/* 为表格单元格添加样式 */
td {
  font-size: 14px;
  text-align: center;
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
}

示例2：使用CSS实现响应式布局。

你可以使用CSS中的媒体查询实现响应式布局，使乘法表在不同设备上显示更加友好。以下是一个简单的示例：

/* 小于等于600px的设备 */
@media screen and (max-width: 600px) {
  table {
    width: 100%;
  }
  td {
    width: 20%;
    font-size: 12px;
  }
}

/* 大于600px的设备 */
@media screen and (min-width: 601px) {
  table {
    width: 60%;
    margin: 0 auto;
  }
}

以上就是“JavaScript实现九九乘法表的简单实例”的完整攻略，希望能对你有所帮助。

阅读剩余 51%