Javascript 利用for循环制作多种星星模型

使用javascript制作星星模型的主要工具就是for循环语句！

使用一个for循环语句可以生成一维的星星样式！

使用两个for循环语句可以制作二维星星样式！

（可直接往后面看）

 

首先先看一维星星样式！

实例1：打印五颗横向排列的星星。

        // 打印五颗星星
        var str = '';
        for (var i = 1; i <= 5; i++) {
            str = str + '★';
        }
        console.log(str);

输出结果：

 

解析：

其中 str 主要作用是运用String类型的特点，让下面的星星变成横向排列的。

如果不用 str 直接在 str 这一行直接输出会输出纵向的五个星星，如下所示：

        var num = prompt('请输入打印星星的个数： ')
        var str = 0;
        for (var i = 1; i <= num; i++) {
            console.log('★');
        }

 

 

实例一加强版：打印指定输入个数的横向星星。

        // 指定个数打印五颗星星
        var num = prompt('请输入打印星星的个数： ')
        var str = 0;
        for (var i = 1; i <= num; i++) {
            console.log('★');
        }
        console.log(str);

解析：添加一个变量 num 用来接收输入的自定义星星个数，替代原先的指定个数 ”5“。

 

二维星星样式!

实例2：打印 十行 十列 星星。

主要用两层for循环语句

        // 打印十行十列星星
        var str = '';
        for (var i = 1; i <= 10; i++) {
            for (var j = 1; j <= 10; j++) {
                str += '★';
            }
            str += '\n';
        }
        console.log(str);

 实例2加强版：打印 指定行指定列的星星。

        // 打印 指定行指定列的星星
        var row = prompt('请输入指定的行数： ')
        var column = prompt('请输入指定的列数： ')
        var str = '';
        for (var i = 1; i <= row; i++) {
            for (var j = 1; j <= column; j++) {
                str += '★';
            }
            str += '\n';
        }
        console.log(str);

 运行过程及结果：

自定义输入任意个数的行数和列数：我输入的是5行8列

 

 

 

实例三：从多到少打印十行星星样式！

核心思想：①两个 for 循环语句

                  ②第二个for循环中 把行数的值赋给列值  [var j = i ]（让列从第 i 开始！）     

                                如果行数是1，把1赋值给列，让列从1开始，列数就是10。

                                如果行数是2，把2赋值给列，让列从2开始，列数就是9。

                                如果行数是3，把3赋值给列，让列从3开始，列数就是8。

                                。。。。。。。

                                如果行数是10，把10赋值给列，让列从10开始，列数就是1。

从而让列数逐渐减一，从而达到倒序排列的结果！

代码如下：

        // 从大到小打印十行星星
        var str = '';
        for (var i = 1; i <= 10; i++) {
            for (var j = i; j <= 10; j++) {
                str += '★';
            }
            str += '\n';
        }
        console.log(str);

 

 实例三加强版：自定义行数和列数的从多到少打印十行星星样式！

注意：①如果列数大于行数可以实现梯形排列，②如果列数小于行数，就以列数为最大值排列。

        //自定义行数和列数的从多到少打印十行星星样式！       
        var row = prompt('请输入星星几行几列倒数');
        var column = prompt('请输入行列数： ')
        var str = '';
        for (var i = 1; i <= row; i++) {
            for (var j = i; j <= column; j++) {
                str += '★';
            }
            str += "\n";
        }
        console.log(str);

①如果列数大于行数可以实现梯形排列

        输入5行10列————>从多到少5行10列梯形星星。

 

 

 ②如果列数小于行数，就以列数为最大值排列

        输入10行2列———>从多到少两行两列星星。

 

 

 

实例四：打印从少到多星星样式！

核心思想：①两个 for 循环语句

                  ②第二个for循环中 让列数的值小于等于行数 [i <= j]   

                                如果行数是1，列数j  <=  行数i ，即列数就是1，打印1列

                                如果行数是2，列数j  <=  行数i ，即列数就是2，打印2列

                                如果行数是3，列数j  <=  行数i ，即列数就是3，打印3列

                                。。。。。。

                                 如果行数是10，列数j  <=  行数i ，即列数就是10，打印10列

让列数逐渐加1，从而实现累加的效果！                          

代码如下：

        // 顺序排的星星
        var str = '';
        for (var i = 1; i <= 10; i++) {
            for (var j = 1; j <= i; j++) {
                str += '★';
            }
            str += '\n';
        }
        console.log(str);

 实例四加强版：自定义输入个数的打印从少到多星星样式！

        // 自定义正数星星
        var row = prompt('请输入星星行数： ');

        var str = '';
        for (var i = 1; i <= row; i++) {
            for (var j = 1; j <= i; j++) {
                str += '★';
            }
            str += '\n';
        }
        console.log(str);

 

 

 兄弟们我写到十二点，请给个点赞！感谢各位！