Js循环之三角形和矩形实例

最新推荐文章于 2023-11-15 13:07:13 发布

竹箫云淡

最新推荐文章于 2023-11-15 13:07:13 发布

阅读量1.1k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_42420490/article/details/104855041

版权

1、 For和while循环

for循环是应用最广泛的循环形式，它适用于已知循环次数、循环嵌套情况
。for循环可以和while循环进行转化，两个语法，只是形式不同，作用，功能等全都完全相同
For循环形式：for(循环变量的初始值;判断进入条件;步长){循环体}，它的优点之一，是将循环变量和循环次数相关的设定都定义在()中，使设定内容更加集中，不容易造成语法形式混乱。

2、循环及其嵌套的例子

通过循环，我们能做很多事情，它把重复的事情全都列在一个循环体内，避免了代码的重复性，方面我们检查和书写。对于循环的打印图行的应用，它适用于有规律、简单的图形输出，比如，金字塔、(直角、等腰)三角形、梯形、矩形。而对于普通的五边形、六边形等不易输出，而那些等边的多边形(n>4)，只利用循环嵌套是不能将其输出的。因为它的每一个打印点可以看作一个矩形阵，每一个打印目标均在小方格内。
由此可知，循环嵌套打印对于特殊(等边、指定角度等)的多边形(n>4)，是不能将其输出的。下面来看几个循环嵌套的实例：
直角三角形：

var row=prompt('请输入星星的行数')
    for(var i=1;i<=row;i++){
        for(var j=1;j<=i;j++){
            document.write('⭐');
        }
        document.write('<br>');
    }

我们输入5时，页面将会打印一个行数是5行的直角三角形，如图：
直角三角形输出
这种方式的输出，是循环嵌套种最基础，也是最简单的，对于图形使用循环的方式进行输出时，我们主要要找出图形列与行之间的关系。比如这个直角三角形：它的每行打印的个数(列数)，正好与行数相等，这样我们就可以使用j<=i的规律进行书写代码。

等边三角形：

 for(var i=1;i<=5;i++){
        for (var j = 1; j <= 5 - i; j++) {
            document.write("<span></span>");
        }
        
        for (var j = 1; j <=i; j++) {
            document.write("⭐");
            document.write("<span></span>");
        }
        document.write("<br>");
    }

	<style>
    span{ width: 21.97px;display: inline-block;}
    </style>

它的输出图形为：
等边三角形输出
代码中，我们添加了span空标签来代替空格，原因很简单，我们不能控制页面对空格输出的大小，即使我们设置页面的font-size=16px，也不能时空格的大小等于16px。所以我们使用空标签的方式来代替空格，目的是为了使页面能够形成一个"矩形阵"，来达到页面良好的视觉效果(以下几种输出不再解释span的问题，其形式均与这里的相同)。当然这样的三角形并不是唯一的，比如还有以下形势：

	var num=parseInt(prompt('请输入三角形的行数(需为大于0的数)'));
    for(var i=1;i<=num;i++){
        for (var j = 1; j <= num - i; j++) {
            document.write("<span></span>");
        }
        
        for (var j = 6-i; j <=4+i; j++) {
            if(j==6-i || j==4+i){
                document.write("⭐");
            }else if(i==num){
                document.write("⭐"); 
            }else{
                document.write("<span></span>");
            }    
        }
        document.write("<br>");
    }

这里我们输入的数字是5(5行)，那么它的输出三角形的结果是：
另外一种三角行输出
中间为空，只有边上有星星的情况，这种图形亦是有规律的：除了最后一行是全部打印外，其余的行与列之间，星星打印的个数都是两个，且位置都在j==6-i || j==4+i上，所以我们便可输出打印了。

矩形输出：

	var num=parseInt(prompt('请输入矩形的行数(需为大于0的数)'));
    for(var i=1;i<=num;i++){
        for (var j = 1; j <= 2; j++) {
            document.write("<span></span>");
        }
        
        for (var j = 1; j <=num; j++) {
            if(j==1 || j==num){
                document.write("⭐");
            }else if(i==1){
                document.write("⭐"); 
            }else if(i==num){
                document.write("⭐"); 
            }else{
                document.write("<span></span>");
            }    
        }
        document.write("<br>");
    }

这里我们输入的数字是5(5行)，那么它的输出矩形的结果是：
矩形的输出
同样，我们得出的也是中间为空，只有边上有星星的情况，这种图形的规律：除了首行和最后一行是全部打印外，其余的行与列之间：星星打印的个数均在相同位置，只是行数需要+1即可，且位置都在j==1 || j==num(这是因为在打印星星之前，我们已经打印了空标签，所以可以认为是在1和num上)，所以我们便可输出打印了。