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>")
    }

效果如圖：