js打印九九乘法表（循环）

今日份图片
请查收~~~

多的不说，少的不唠
今天咱用js打印一个九九乘法表
在九九乘法表外面套上一个表格
更好看

分析

首先咱们来想想九九乘法表有什么规律，只有把规律分析出来了，循环也就出来了。
九九乘法表不用多少，首先得九行，那么我们就得有一个从 1 到 9 的一个循环。

for (let i = 1; i <= 9; i++) {
        
}

那么我们再来分析这个循环里面写什么

九九乘法表的第一行

1 * 1 = 1

九九乘法表的第二行

1 * 2 = 22 * 2 = 4

九九乘法表的第三行

1 * 3 = 12 * 3 = 13 * 3 = 9

九九乘法表的第四行

1 * 4 = 12 * 4 = 83 * 4 = 124 * 4 = 16
……
那么我们来分析下

不知道小伙伴们有没有看出什么规律呢

第一行打印一个，第二行打印两个，第三行打印三个，第四行打印四个……第九行打印九个，可能会有小伙伴会说了，这些我们早就知道了，关键是怎么打印出来，这我们就要通过循环来实现了。

这时我们就需要第二个循环了

for (let j = 1; j <= i; j++) {
     document.write(j+"*"+i+"="+i*j+"&emsp;")
}

我们第二个循环里面的 j 是不能大于 i 的，最多只能等于
把两个循环综合起来

for (let i = 1; i <= 9; i++) {
        for (let j = 1; j <= i; j++) {
            document.write(j+"*"+i+"="+i*j+"&emsp;")
        }
        document.write("<br>")
 }

我们一起来看一下，第一次循环，i 是1，进入第二个循环， j 此时也是1，打印 j * i ，也就是1 * 1，因为此时 j 和 i 都是1，所以本次循环只会执行一遍，然后跳出去，继续执行外面for循环的第二次；此时 i 是2， j 是1，满足 j <= i，所以打印一遍j * i，也就是1 * 2 ，j ++，此时 j 是2，发现还是满足 j <= i，于是打印 j * i，也就是2 * 2；再来看第三次循环，此时 i ++， i 变成了3，进入第二个for循环，此时 j 是1，打印 j * i ，也就是1 * 3 ，然后 j ++，j 变成了2，满足 j <= i，打印 j * i，也就是 2 * 3，然后 j++， j 变成了3，满足 j <= i，打印 j * i，也就是 3* 3，然后 j++，j 变成了4，不满足 j <= i，跳出第二个循环……

这样以此类推，就完成了九局乘法表的打印，这时打印出来是这样的，

1 * 1=1 
1 * 2=2 2 * 2=4 
1 * 3=3 2 * 3=6 3 * 3=9 
1 * 4=4 2 * 4=8 3 * 4=12 4 * 4=16 
1 * 5=5 2 * 5=10 3 * 5=15 4 * 5=20 5 * 5=25 
1 * 6=6 2 * 6=12 3 * 6=18 4 * 6=24 5 * 6=30 6 * 6=36 
1 * 7=7 2 * 7=14 3 * 7=21 4 * 7=28 5 * 7=35 6 * 7=42 7 * 7=49 
1 * 8=8 2 * 8=16 3 * 8=24 4 * 8=32 5 * 8=40 6 * 8=48 7 * 8=56 8 * 8=64 
1 * 9=9 2 * 9=18 3 * 9=27 4 * 9=36 5 * 9=45 6 * 9=54 7 * 9=63 8 * 9=72 9 * 9=81

但是这样并不是很好看，我们在每打印一个乘法的时候，加上一个表格，这样看起来就比较好看一些。

document.write("<table style='border: 3px solid #558c5b'>")
    for (let i = 1; i <= 9; i++) {
        document.write("<tr style='border: 1px solid #3f358c'>")
        for (let j = 1; j <= i; j++) {
            document.write("<td style='border: 1px solid #3f358c'>")
            document.write(j+"*"+i+"="+i*j+"&emsp;")
            document.write("</td>")
        }
        document.write("<br>")
        document.write("</tr>")
    }

效果如图：