利用JavaScript的循環語句再頁面中打印圖形

利用JavaScript的循環語句再頁面中打印圖形

前面兩篇博客我們講解怎麼使用for循環進行數學的簡單計算，這篇博客主要是利用js的循環語句在網頁中打印出各種圖形。

1.利用js的循環語句打印矩形

    // 利用循環語句在網頁中打印十行十列的矩形
    for (var j = 0; j < 10; j++) {
        // 一行打印10個 @
        for (var i = 0; i < 10; i++) {
            document.write("@");
        }
        document.write("<br/>");
    }
    
    // 利用while循環打印矩形
    var x=0;
    while(x<10){
        var y=0;
        while(y<10){
            document.write("☆");
            y++;
        }
        document.write("<br/>");
        x++;
    }    

上面的問題關鍵在於搞清楚第一個for循環是決定打印多少行的，第二個for循環是決定每一行打印多少個。

2.利用js的循環語句打印三角形

    // 正立三角形
    // 打印10行
    for (var j = 0; j < 10; j++) {
        // 一行打印10個 @
        for (var i = 0; i < j+1; i++) {
            document.write("@");
        }
        document.write("<br/>");
    }
    
    // 倒立三角形1
    for (var j = 0; j < 10; j++) {
        // 一行打印10個 @
        for (var i = j; i < 10; i++) {
            document.write("@");
        }
        document.write("<br/>");
    }
    
    // 倒立三角形2
    for (var j = 10; j > 0; j--) {
        // 一行打印10個 @
        for (var i = 0; i < j; i++) {
            document.write("@");
        }
        document.write("<br/>");
    }
    

上面代碼打印三角形的關鍵在於第一個for循環同樣是決定打印多少行，第二個for循環同樣是決定每一行打印多少次，但不同的是每一行打印的次數不是固定的，所以只要找到這個規律就可以解決這個問題。

3.利用js的循環語句打印平行四邊形

    // 利用空格在矩形前面打印空白的三角形
    for (var j = 0; j < 10; j++) {
        // 打印前面的三角形
        for (var k = 0; k < j; k++) {
            document.write("&nbsp;&nbsp;&nbsp;");
        }
        // 一行打印10個☆
        for (var i = 0; i < 10; i++) {
            document.write("☆  ");
        }
        document.write("<br/>");
    }
    
    // 利用css知識，在矩形前面打印透明的☆
    for (var j = 0; j < 10; j++) {
        // 打印前面的三角形
        for (var k = 0; k < j; k++) {
            document.write("<span style='opacity:0'>☆</span>");
        }
        // 一行打印10個☆
        for (var i = 0; i < 10; i++) {
            document.write("☆  ");
        }
        document.write("<br/>");
    }

解決上面問題的思路主要是用三角形和矩形結合起來，然後在矩形的前面打印看不到的三角形，以達到將矩形整體向右推移的目的，最後實現打印平行四邊形的效果。其實就是障眼法。

視頻講解鏈接：
https://www.bilibili.com/video/BV1Qz411q7mK