引言

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

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

基础版本

基础版本的九九乘法表

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

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

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

除此之外,还有htmlcss知识,就不做另外说明了。

右侧排列版本

右侧排列版本的九九乘法表

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

有以下几种做法(其中第一种并不常用):

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

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

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

“抢七”小游戏

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

所有带“7”,是“7”的倍数的结果,都给加上红色效果(给对应单元格加上背景)

抢七游戏的九九乘法表

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

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

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

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

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

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

最后修改:2024 年 04 月 22 日
如果您对各种技术博客文章感兴趣,欢迎关注拓行公众号,分享各种专业技术知识~