【js练习】九九乘法表

## 引言

感谢黎总，想到了一个很棒的`js`的小练习，九九乘法表。

这个练习分为几个阶段，分别对应`js`学习的基础、进阶

## 基础版本

![基础版本的九九乘法表](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2024/04/4171164975.png)

常规生成九九乘法表，每一项的内容是`1 * 1 = 1`这样的格式。

这个案例是用来考察以下知识的：

1. `for`循环构建
2. 动态创建`DOM`元素及追加页面
3. 字符串定义（反斜杠）和变量混入
4. 元素内容、样式设置（操作`DOM`）

除此之外，还有`html`和`css`知识，就不做另外说明了。

## 右侧排列版本

![右侧排列版本的九九乘法表](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2024/04/17708919.png)

这个版本主要是将 `1 * 1 = 1`这一项放到了右侧，左侧留空

有以下几种做法（其中第一种并不常用）：

1. 用`direction: rtl;`样式，将显示方向修改，内容都进行颠倒
2. 浮动`float`元素，直接右侧浮动
3. `flex`布局，直接水平居右
4. `js`直接生成`9*9`的单元格，但左侧的不显示，输出内容也更换

如果是第四种方式的话，还考验了部分知识：

1. `js`的条件与判断
2. 元素属性（`class`）的操作与判断（或者显示隐藏的行内样式）

## “抢七”小游戏

在上面的基础上，再增加一个小小的难度要求：

所有带“7”，是“7”的倍数的**结果**，都给加上红色效果（给对应单元格加上背景）

![抢七游戏的九九乘法表](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2024/04/3050957914.png)

这里我们可以将循环次数改为更高的，比如“五十✖五十 乘法表”

可以看到我们代码当中更直观的部分，方便验证错误。

这里除了上面的考察点以外，还考察了一些知识：

1. 如何判断数字是否是`7`的倍数
2. 如何判断数字是否含有`7`

欢迎关注拓行公众号，分享各种技术博客文章

拓行——奋勇进取，开拓未来，砥砺前行

最后修改：2024 年 04 月 22 日

如果您对各种技术博客文章感兴趣，欢迎关注拓行公众号，分享各种专业技术知识~

【js练习】九九乘法表

黄炜 • 2024 年 04 月 22 日