您的当前位置：首页正文

JavaScript——使用for循环和while循环分别打印输出各种三角形

来源：九壹网

思路：

1、声明变量，用于接收用户输入的三角形层数。

2、外层 for 语句控制三角形的层数。

3、内层 for 语句控制 “*” 前的空格和 “*” 的数量。

首先获取用户输入的三角形层数

 var n = prompt('请输入三角形的层数')

以5层三角形为例，如果要打印等腰三角形则：

每层中 "*" 的数量 = 当前层数 × 2 - 1 。例如当前为第4层，则 "*" 数量 = 4 × 2 - 1 = 7

每层 "*" 前的空格 = 三角形层数 - 当前层数。例如当前行数为第3层，则空格数 = 5 - 3 = 2

1、正等腰三角形

 document.write('正等腰三角形')
        document.write("<br/>");   //插入一个换行符
        document.write("<br/>");
        for (var i = 1; i <= n; i++) {

            // 绘制每一层前面的空格
            for (var k = 1; k <= n - i; k++) {
                document.write("&nbsp;")
            }

            // 绘制每一层的星号
            for (var j = 1; j <= i * 2 - 1; j++) {
                document.write('*')
            }

            // 打印换行符，以开始新的一行
            document.write("<br/>");
        }

如果在弹出的对话框中输入三角形的层数为5，则输出结果为：

2、倒等腰三角形

  document.write('倒等腰三角形')
        document.write("<br/>");
        document.write("<br/>");

        for (var i = n; i >= 1; i--) {

            // 循环用于打印空格，以控制每行星号的对齐
            for (var k = 1; k <= n - i; k++) {
                document.write("&nbsp;")
            }

            // 循环用于打印星号，控制每行打印的数量
            for (var j = 1; j <= i * 2 - 1; j++) {
                document.write('*')
            }

            // 打印换行符，以开始新的一行
            document.write("<br/>");
        }

如果在弹出的对话框中输入三角形的层数为5，则输出结果为：

以5层三角形为例如果要打印直角三角形则：

每层中 "*" 的数量 = 当前层数 × 2 - 1 。例如当前为第4层，则 "*" 数量 = 4 × 2 - 1 = 7

就不用写用于打印每层 "*" 前空格的内层for循环了

3、正直角三角形

  document.write('正直角三角形')
        document.write("<br/>");
        document.write("<br/>");

        for (var i = 1; i <= n; i++) {
            // 循环用于打印星号，控制每行打印的数量
            for (var j = 1; j <= i * 2 - 1; j++) {
                document.write('*')
            }
            // 打印换行符，以开始新的一行
            document.write("<br/>");
        }

如果在弹出的对话框中输入三角形的层数为5，则输出结果为：

4、倒直角三角形

   document.write('倒直角三角形')
        document.write("<br/>");
        document.write("<br/>");
        for (var i = n; i >= 1; i--) {
            // 循环用于打印星号，控制每行打印的数量
            for (var j = 1; j <= i * 2 - 1; j++) {
                document.write('*')
            }
            // 打印换行符，以开始新的一行
            document.write("<br/>");
        }

如果在弹出的对话框中输入三角形的层数为5，则输出结果为：

使用for循环打印各种三角形的完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for循环打印各种三角形</title>
</head>

<body>
    <script>
        // 提示用户输入三角形的层数
        var n = prompt('请输入三角形的层数')

        document.write('正等腰三角形')
        document.write("<br/>");   //插入换行符
        document.write("<br/>");

        // 绘制正等腰三角形
        for (var i = 1; i <= n; i++) {

            // 绘制每一层前面的空格
            for (var k = 1; k <= n - i; k++) {
                document.write("&nbsp;")
            }

            // 绘制每一层的星号
            for (var j = 1; j <= i * 2 - 1; j++) {
                document.write('*')
            }

            // 打印换行符，以开始新的一行
            document.write("<br/>");
        }

        document.write("<br/>");
        document.write('倒等腰三角形')
        document.write("<br/>");
        document.write("<br/>");

        // 绘制倒等腰三角形
        for (var i = n; i >= 1; i--) {

            // 循环用于打印空格，以控制每行星号的对齐
            for (var k = 1; k <= n - i; k++) {
                document.write("&nbsp;")
            }

            // 循环用于打印星号，控制每行打印的数量
            for (var j = 1; j <= i * 2 - 1; j++) {
                document.write('*')
            }

            // 打印换行符，以开始新的一行
            document.write("<br/>");
        }

        document.write("<br/>");
        document.write('正直角三角形')
        document.write("<br/>");
        document.write("<br/>");

        // 绘制正直角三角形
        for (var i = 1; i <= n; i++) {

            // 循环用于打印星号，控制每行打印的数量
            for (var j = 1; j <= i * 2 - 1; j++) {
                document.write('*')
            }

            // 打印换行符，以开始新的一行
            document.write("<br/>");
        }

        document.write("<br/>");
        document.write('倒直角三角形')
        document.write("<br/>");
        document.write("<br/>");

        // 绘制倒直角三角形
        for (var i = n; i >= 1; i--) {

            // 循环用于打印星号，控制每行打印的数量
            for (var j = 1; j <= i * 2 - 1; j++) {
                document.write('*')
            }

            // 打印换行符，以开始新的一行
            document.write("<br/>");
        }

    </script>
</body>

</html>

使用 while循环和 for循环打印输出各种三角形的思路在本质上是相同的，只是循环控制的方式有所不同。

使用while循环打印各种三角形的完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while循环打印各种三角形</title>
</head>
<body>
    <script>
    // 获取用户输入的三角形层数
    var n = prompt('请输入三角形的层数')

    document.write('正等腰三角形')
    document.write("<br/>");        //插入换行符
    document.write("<br/>");

    // 绘制正等腰三角形
    var i = 1;
    while ( i <= n ) {

        // 循环用于输出空格以对齐星号
        var k = 1
        while ( k <= n - i) {
            k++
            document.write("&nbsp;")
        }

         // 循环用于输出当前行的星号
        var j = 1;
        while ( j <= i * 2 - 1) {
            j++
            document.write('*')
        }
        i++
        document.write("<br/>");
    }

    document.write("<br/>");
    document.write('倒等腰三角形')
    document.write("<br/>");
    document.write("<br/>");

    // 绘制倒等腰三角形
    var i = n;
    while ( i >= 1 ) {

        // 在每一行前打印空格
        var k = 1;
        while ( k <= n - i ) {
            k++
            document.write("&nbsp;")
        }

        // 打印星号
        var j = 1;
        while ( j <= i * 2 - 1) {
            j++
            document.write('*')
        }
        i--
        document.write("<br/>");
    }

    document.write("<br/>");
    document.write('正直角三角形')
    document.write("<br/>");
    document.write("<br/>");

    // 绘制正直角三角形
    var i = 1; 
    while (i <= n) {

        // 用于在每一行打印星号，数量依赖于当前行数 i
        var j = 1;
        while ( j <= i * 2 - 1) {
            j++
            document.write('*')
        }
        i++
        document.write("<br/>");
    }
    
    document.write("<br/>");
    document.write('倒直角三角形')
    document.write("<br/>");
    document.write("<br/>");
    
    // 绘制倒直角三角形
    var i = n;
    while ( i >= 1) {
        
        // 打印星号
        var j = 1; 
        while (j <= i * 2 - 1 ) {
            j++
            document.write('*')
        }
        i--
        document.write("<br/>");
    }
</script>

</body>
</html>

while语句和for语句都能够实现循环，语句也可以相互转换，但在不能够确定循环次数的情况下，更适合使用while语句实现循环。

Tip：若条件表达式永远为true，则会出现死循环，因此为了保证循环可以正常结束，应该保证条件表达式的值存在false的情况。

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文