JavaScript for循环案例——打印特定的图形

1、打印一行五个连续的星星

        var s = '';//要把s设置为空字符
        for (var i = 1; i <= 5; i++) {
            s = s + '★';
        }
        console.log(s);

 输出结果：

 

核心思路： 把★当成字符连接连接起来，而且要注意在定义变量s的时候要初始化为空字符

2、打印一行星星, 数量由用户决定

        var num = prompt('请输入个数');
        var s = '';
        for (var i = 1; i <= num; i++) {
            s = s + '★';
        }
        console.log(s);

 当输入10的时候，输出结果：

 

核心思路：在for循环里面让i的范围由用户输入的num控制

3、打印五行五列星星

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

输出结果：

核心思路：用双层for循环，外循环控制行，内循环控制列，要注意在每一行后面加上一个换行符号。 

 

4、打印n行n列的星星

        var rows = prompt('请输入行数');
        var line = prompt('请输入列数');
        var s = '';
        for (var i = 1; i <= rows; i++) {
            for (var j = 1; j <= line; j++) {
                s = s + '★';
            }
            s = s + '\n';
        }
        console.log(s);

输入行3列4的输出结果：

 

核心思路：结合例2和例3的的核心代码

5、打印五行三角形案例

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

输出结果：

 

核心思路：跟矩形图形不同的是内层循环是j<=i，以此来实现每一行输出的星星数量和行数一致 

 

6、打印五行倒三角形案例 

        var s = '';
        for (var i = 5; i >= 1; i--) {
            for (var j = 1; j <= i; j++) {
                s = s + '★';
            }
            s = s + '\n';
        }
        console.log(s);

 输出结果：

核心思路：和正三角形不同的是外层循环的i的初始值和每次循环结束后由加1改为减1

 

当然也有第二种方法可以实现上面的图形

        var str = '';
        for (var i = 1; i <= 5; i++) { // 外层循环控制行数
            for (var j = i; j <= 5; j++) { // 里层循环打印的个数不一样:j = i
                str = str + '★';
            }
            str += '\n';
        }
        console.log(str);

 核心思路：这种方法其实和正三角形差不多，外层循环不变，改变内层循环j的初始值和变化规律

总结：其实两种方法都差不多，需要在正三角形的基础上改变外层循环或者内层循环来实现

 

7、打印九九乘法表

        var s = '';
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                s = s + j + '*' + i + '=' + i * j + '\t';
            }
            s = s + '\n';
        }
        console.log(s);

输出样式： 

核心思路：双层for嵌套，外层控制行，里层控制列。其实和正三角形的思路一致，只是输出内容更改了一下。要注意的是每一个式子后面要加\t空开一段距离，还有每一层外层循环结束前要加\n换行。

8、打印倒等腰三角形

        var s = '';
        var num = prompt('请输入数字');
        for (var i = num; i >= 1; i--) {
            for (var j = i; j <= num - 1; j++) {
                s = s + '  ';
            }
            for (var k = 2 * i - 1; k >= 1; k--) {
                s = s + '★';
            }
            s = s + '\n';
        }
        console.log(s);

输入4的输出结果：

核心思路：要运用三个for循环来实现，外层for循环控制三角形行数，内层两个for循环一个控制空格输出，一个控制星星输出。

9、打印正等腰三角形

        var s = '';
        var num = prompt('请输入数字');
        for (var i = 1; i <= num; i++) {
            for (var j = num - 1; j >= i; j--) {
                s = s + '  ';
            }
            for (var k = 1; k <= 2 * i - 1; k++) {
                s = s + '★';
            }
            s = s + '\n';
        }
        console.log(s);

输入5的输出结果：

核心思路：跟倒三角形相似，需要改变的是for循环里面的条件，只需要把每一个都倒过来就好了

 10、用户输入一个数，得到一个数字沙漏

        var s = '';
        var num = prompt('请输入数字');
        for (var i = num; i >= 1; i--) {
            for (var j = i; j <= num - 1; j++) {
                s = s + ' ';
            }
            for (var k = 2 * i - 1; k >= 1; k--) {
                s = s + parseFloat(i);
            }
            s = s + '\n';
        }
        for (var a = 1; a <= num; a++) {
            for (var b = num - 1; b >= a; b--) {
                s = s + ' ';
            }
            for (var c = 1; c <= 2 * a - 1; c++) {
                s = s + parseFloat(a);
            }
            s = s + '\n';
        }
        console.log(s);

输入5的输出结果：

核心思路：就是将上面例8和例9的等腰三角形结合起来，但是重点在于每一行输出的数字不同，这里我用输出变量i和a来实现，要注意把它们转换为字符型，不然不能和空格以及换行符号链接使用。

附加：这是我上学期学c语言时老师布置的作业，我那会写不出来这题。现在虽然写出来了部分，只是我现在的水平仍不足，做不到下半部分不输出1，等以后代码水平提高了再回来写这块。