一、在js中通过循环做出图形

用js在网页端通过循环做出各种图形

二、实例

1.正方形

代码如下（示例）：

    for (let i = 0; i < 10; i++) {
        //输出一行
        for (let j = 0; j <10 ; j++) {
            document.write("* &emsp;")
        }
        document.write("<br>")
    }
    document.write("<hr>")

2.长方形

代码如下（示例）：

for (let i = 0; i < 6; i++) {
        //输出一行
        for (let j = 0; j <10 ; j++) {
            document.write("* &emsp;")
        }
        document.write("<br>")
    }
    document.write("<hr>")

3.平行四边形

代码如下（示例）：

 for (let i = 0; i < 6; i++) {
        //输出空格
        for (let j = 0; j <5-i ; j++) {
            document.write("&emsp;")
        }
        //输出*
        for (let j = 0; j <10 ; j++) {
            document.write("* &emsp;")
        }
        document.write("<br>")
    }
    document.write("<hr>")

4.三角形

代码如下（示例）：

for (let i = 1; i <=10; i++) {
        //输出空格
        for (let j = 1; j <=10-i ; j++) {
            document.write("&emsp;")
        }
        //输出*
        for (let j = 1; j <=i ; j++) {
            document.write("* &emsp; ")
        }
        document.write("<br>")
    }
    document.write("<hr>")

5.菱形

代码如下（示例）：

// 4.1上半部分
    for (let i = 1; i <=10; i++) {
        //输出空格
        for (let j = 1; j <=10-i ; j++) {
            document.write("&emsp;")
        }
        //输出*
        for (let j = 1; j <=i ; j++) {
            document.write("* &emsp; ")
        }
        document.write("<br>")
    }
    //4.2下半部分
    for (let i = 1; i <=9; i++) {
        //输出空格
        for (let j = 1; j <=i ; j++) {
            document.write("&emsp;")
        }
        //输出*
        for (let j = 1; j <=10-i ; j++) {
            document.write("* &emsp; ")
        }
        document.write("<br>")
    }

5.进阶：空心菱形

代码如下（示例）：

 for (let i = 1; i <=10; i++) {
        //输出空格
        for (let j = 1; j <=10-i ; j++) {
            document.write("&emsp;")
        }
        //输出*
        for (let j = 1; j <=i ; j++) {
            if(j==1||j==i)//边缘部分保留
                document.write("* &emsp; ")
            else//其它的替换为空格
                document.write("&nbsp; &emsp; ")
        }
        document.write("<br>")
    }
    //5.2下半部分
    for (let i = 1; i <=9; i++) {
        //输出空格
        for (let j = 1; j <=i ; j++) {
            document.write("&emsp;")
        }
        //输出*
        for (let j = 1; j <=10-i ; j++) {
            if(j==1||j==10-i)
                document.write("* &emsp; ")
            else
                document.write("&nbsp; &emsp; ")
        }
        document.write("<br>")
    }

以下为实际图：

---

总结

以上就是今天的内容，本文仅仅简单介绍了如何使用js的循环做出图形，希望大家多加帮忙补充，新手上路多多关照。