循环嵌套for循环实现九九乘法表

最新推荐文章于 2024-03-20 12:00:38 发布

是志慧吖！

最新推荐文章于 2024-03-20 12:00:38 发布

阅读量5.9k

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_46066545/article/details/126420353

版权

本文通过JavaScript代码示例介绍了如何利用for循环绘制九九乘法表和等腰三角形。在乘法表中，外层循环控制行数，内层循环控制列数，通过调整条件实现乘法表的绘制。而在等腰三角形的绘制中，外层循环控制行数，内层两个循环分别控制空格和星星的数量，根据行数动态调整空格与星星的比例，最终形成等腰三角形。

摘要由CSDN通过智能技术生成

循环嵌套for循环

首先搞明白for循环控制的是什么，其次是搞清楚行数和列数的关系，先来一个简单的小例子：
外层循环控制九九乘法表一共有九行，记得加换行

内层循环控制每一列，我们先看行与列的数量关系，第一行有一列，第二行有两列，第三行有三列，以此类推，我们可以得到n与m的关系是相等的，所以确定第二个for内的条件是m<=n。

 document.write('<table border="1">')
        for (var n = 1; n <= 9; n++) {

            document.write("<tr>");
            for (m = 1; m <= n; m++)//每一列要参照行数来定，所以列数小于行数
            {

                document.write('<td>' + `${n}*${m}=` + n * m + '&nbsp;&nbsp;' + '</td>');//每一类

            }
            document.write("</tr>");
            document.write('<br/>');//每一行换行，不加会变成一行

        }
        document.write('</table>')//每一行都要换行，否则会一行显示

搞明白基本原理后，通过九九乘法表来进一步理解：
在这里插入图片描述

等腰三角形检验一下掌握情况
等腰三角形需要一个外循环确定行数，两个内循环来确定星星和空格。外层for循环确定一共有八行，内层第一个循环控制每一行的空格数量，内层第二个循环确定星星的数量：当我们不加内层第一个for循环，即没有空格时，如下图：

for (n = 0; n < 8; n++) {
            for (m = 0; m <= n; m++) {
                document.write('* &nbsp;');
            }
            document.write("<br>");
        }

在这里插入图片描述
不加空格的效果和九九乘法表实现效果相同，此时我们要考虑每一行的**空格数量（j）和行数（n）**的数量关系，第一行有7个空格：当n=1时j=7（8-n）；第二行有6个空格：当n=2时j=6（8-n）；以此类推，我们得到空格j与行数n的关系：j=8-n；所以控制空格的for内的条件就得到：j<8-n，最终实现效果代码如下：

  for (n = 0; n < 8; n++) {
            for (j = 0; j < 8 - n; j++) {
                document.write('&ensp;');
            }
            for (m = 0; m <= n; m++) {
                document.write('* &nbsp;');
            }
            document.write("<br>");
        }