第一节九九乘法表实践

【任务描述】

在前端开发中，开发者经常需要把数据动态变成网页元素。本节任务要求大家不再手动写 HTML 标签，而是用 JavaScript 的循环语句，在浏览器中实时计算并生成经典的“九九乘法表”。同时，结合响应式 CSS 布局，对生成的乘法表进行排版和美化，完成从代码逻辑到精美界面的完整开发流程。

九九乘法表实践

【实现思路】

本任务可以分为两个部分，遵循“逻辑与样式分离”的原则：

JavaScript 逻辑部分：九九乘法表是一个三角形。我们使用两层循环（外层控制行，内层控制列）来生成所有乘法算式。
CSS 样式部分：在电脑上显示 9 列，在手机等小屏幕设备（屏幕宽度 ≤ 760px）上自动调整为 3 列。使用 CSS Grid 布局和媒体查询来实现这个效果。

【任务实施】

任务一：创建 HTML 基础结构

首先，创建一个标准的 HTML5 文档，设置语言为简体中文。在 <body> 中添加主要内容区域，并分别引入外部的 CSS 样式文件和 JavaScript 文件。

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <title>算法渲染 - 动态九九乘法表</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="container">
        <table class="multiplication-table">
            <tbody class="table-container">
              <!-- 九九乘法表 -->
            </tbody>
        </table>
    </main>
    <script src="app.js"></script>
  </body>
</html>

任务二：编写 JavaScript 生成乘法表

在独立的 JavaScript 文件中，我们使用两层循环来生成乘法表。外层循环控制行数，内层循环控制每行的算式数量。

【核心语法：模板字符串】 在拼接动态内容时，传统的加号拼接方式容易出错。ES6 引入的模板字符串使用反引号（`）包裹，通过 ${} 可以直接在字符串中写 JavaScript 表达式，非常方便。

创建 app.js 文件：

// 获取表格容器
const table = document.querySelector('.table-container');

// 外层循环：控制行数（1-9）
for (let i = 1; i <= 9; i++) {
  // 创建一行
  const tr = document.createElement('tr');

  // 内层循环：控制每行的列数（1到当前行数i）
  for (let j = 1; j <= i; j++) {
    // 创建单元格
    const td = document.createElement('td');
    // 创建显示算式的span
    const span = document.createElement('span');
    span.className = 'info';
    // 设置算式文本：如 "3 X 5 = 15"
    span.textContent = `${i} X ${j} = ${i * j}`;
    // 把span放入td，td放入tr
    td.appendChild(span);
    tr.appendChild(td);
  }

  // 把这一行添加到表格
  table.appendChild(tr);
}

任务三：添加 CSS 样式

JavaScript 生成的内容没有样式，需要用 CSS 来美化和布局。创建 style.css 文件：

1. 容器样式

.container {
  width: 1200px;
  margin: 50px auto; /* 水平居中 */
}
/* 小屏幕时容器占满宽度 */
@media (max-width: 760px) {
  .container {
    width: 100%;
    padding: 0 10px;
  }
}

2. Grid 网格布局 使用 CSS Grid 让每行显示 9 列，小屏幕时改为 3 列。

.multiplication-table tr {
  display: grid;
  grid-template-columns: repeat(9, 1fr); /* 9列等分 */
  gap: 8px; /* 单元格间距 */
  margin-bottom: 8px; /* 行间距 */
}

td {
  box-sizing: border-box; /* 内边距不影响宽度 */
}

/* 小屏幕时显示3列 */
@media (max-width: 760px) {
  .multiplication-table tr {
    grid-template-columns: repeat(3, 1fr); /* 3列等分 */
  }
}

3. 单元格美化 为每个乘法算式添加背景色、圆角和悬停效果。

.info {
  display: block;
  padding: 12px 8px;
  border-radius: 8px; /* 圆角 */
  border: 1px solid #ddd;
  cursor: pointer; /* 鼠标变成手型 */
  text-align: center;
  background: linear-gradient(135deg, #2563eb, #1d4ed8); /* 蓝色渐变背景 */
  color: #fff; /* 白色文字 */
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3); /* 阴影效果 */
  transition: all 0.2s ease; /* 过渡动画 */
}

/* 鼠标悬停时的效果 */
.info:hover {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  transform: translateY(-2px); /* 向上移动一点 */
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4); /* 阴影变大 */
}

【课程思政】

算法底层逻辑与中国古代数学智慧

在使用现代 JavaScript 的嵌套循环算法动态渲染“九九乘法表”时，我们不仅是在操纵枯燥的 DOM 节点，更是在致敬中华文明跨越两千年的数学智慧精髓。相比西方延误数百年的数学启蒙，这份源于春秋战国时期的乘诀表，展现了我国先民在抽象逻辑与数字运算上的极致前瞻性。作为新时代的软件工程师，在编写高效算法循环的同时，更应保有坚定的文化自信，将这种根植于血脉的东方智慧融入现代信息技术的架构设计中。

【运行效果】

将创建好的 index.html、style.css 和 app.js 放在同一个文件夹中，用浏览器打开 index.html 即可看到效果。页面会显示一个精美的九九乘法表，鼠标悬停在单元格上会有动画效果。调整浏览器窗口大小，当宽度小于 760px 时，乘法表会自动从 9 列变为 3 列，实现响应式布局效果。

您也可以直接访问在线演示页面查看效果：在线演示

【任务描述】​

【实现思路】​

【任务实施】​

任务一：创建 HTML 基础结构​

任务二：编写 JavaScript 生成乘法表​

任务三：添加 CSS 样式​

【课程思政】​

【运行效果】​