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

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

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

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

(可直接往后面看)

 

首先先看一维星星样式!

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

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

输出结果:

Javascript 利用for循环制作多种星星模型_第1张图片

 

解析:

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

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

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

Javascript 利用for循环制作多种星星模型_第2张图片

 

 

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

        // 指定个数打印五颗星星
        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);

Javascript 利用for循环制作多种星星模型_第3张图片

 实例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列

Javascript 利用for循环制作多种星星模型_第4张图片

 

Javascript 利用for循环制作多种星星模型_第5张图片

 Javascript 利用for循环制作多种星星模型_第6张图片

 

实例三:从多到少打印十行星星样式!

核心思想:①两个 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);

Javascript 利用for循环制作多种星星模型_第7张图片

 

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

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

        //自定义行数和列数的从多到少打印十行星星样式!       
        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列梯形星星。

Javascript 利用for循环制作多种星星模型_第8张图片

 Javascript 利用for循环制作多种星星模型_第9张图片

 Javascript 利用for循环制作多种星星模型_第10张图片

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

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

Javascript 利用for循环制作多种星星模型_第11张图片

 Javascript 利用for循环制作多种星星模型_第12张图片

 e9acb54af00f4292ba6537051c1a5a3b.png

 

实例四:打印从少到多星星样式!

核心思想:①两个 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);

Javascript 利用for循环制作多种星星模型_第13张图片

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

        // 自定义正数星星
        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);

Javascript 利用for循环制作多种星星模型_第14张图片

 

 

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

 

你可能感兴趣的:(javascript,编程,html,javascript,html,算法)