引言
感谢黎总,想到了一个很棒的js
的小练习,九九乘法表。
这个练习分为几个阶段,分别对应js
学习的基础、进阶
基础版本
常规生成九九乘法表,每一项的内容是1 * 1 = 1
这样的格式。
这个案例是用来考察以下知识的:
for
循环构建- 动态创建
DOM
元素及追加页面 - 字符串定义(反斜杠)和变量混入
- 元素内容、样式设置(操作
DOM
)
除此之外,还有html
和css
知识,就不做另外说明了。
右侧排列版本
这个版本主要是将 1 * 1 = 1
这一项放到了右侧,左侧留空
有以下几种做法(其中第一种并不常用):
- 用
direction: rtl;
样式,将显示方向修改,内容都进行颠倒 - 浮动
float
元素,直接右侧浮动 flex
布局,直接水平居右js
直接生成9*9
的单元格,但左侧的不显示,输出内容也更换
如果是第四种方式的话,还考验了部分知识:
js
的条件与判断- 元素属性(
class
)的操作与判断(或者显示隐藏的行内样式)
“抢七”小游戏
在上面的基础上,再增加一个小小的难度要求:
所有带“7”,是“7”的倍数的结果,都给加上红色效果(给对应单元格加上背景)
这里我们可以将循环次数改为更高的,比如“五十✖五十 乘法表”
可以看到我们代码当中更直观的部分,方便验证错误。
这里除了上面的考察点以外,还考察了一些知识:
- 如何判断数字是否是
7
的倍数 - 如何判断数字是否含有
7