JavaScript 循环嵌套

最新推荐文章于 2024-03-24 21:28:01 发布

振南不难

最新推荐文章于 2024-03-24 21:28:01 发布

阅读量476

点赞数

CC 4.0 BY-SA版权

分类专栏： Web

本文链接：https://blog.youkuaiyun.com/qq_42287758/article/details/99297531

Web 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了JavaScript中的循环嵌套，包括while和for两种嵌套循环的使用，通过实例展示了如何打印8*10的表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

循环嵌套

内容

循环的嵌套

第一节 while嵌套循环

打印8*10表格

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 
  </style>

  <script type="text/javascript">
    //题目:生成8*10的表格
    //定义行的计数器
    var r = 1;
    document.write("<table border='1' width='600' align='center'>");
    while(r<=8)
    {
        document.write("<tr>");
        //定义列的计数器
        var c = 1;
        while(c<=10)
        {
            document.write("<td>");
            document.write(r+" - "+c);
            document.write("</td>");

            c++;
        }

        document.write("</tr>");

        r++;
    }
    document.write("</table>");
  </script>
 </head>

 <body>
 
 </body>
</html>

  <script type="text/javascript">
  //i:行号 j:列号

  document.write("<table border='1' width='500' align='center'>")
  for(var i=1;i<=8;i++)
  {
    document.write("<tr>");

    for(var j=1;j<=10;j++)
    {
        document.write("<td>"+i+" - "+j+"</td>");
    }

    document.write("</tr>");
  }
  document.write("</table>");
  </script>

第二节 for嵌套循环

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 span
 {
    display:inline-block;
    width:80px;
    border:0px solid red;
 }
  </style>

  <script type="text/javascript">
  /*
  
  *       1 : 1
  **      2 : 2
  ***     3 : 3
  ****    4 : 4
  *****   5 : 5

  1*1=1
  2*1=2 2*2=4
  3*1=3 3*2=6 3*3=9
  4*1=4 4*2=8 4*3=12 4*4=16
  5*1=5 5*210 5*3=15 5*4=20 5*5=25
  
  */

  

  //i:行 j:列
  /*for(var i=1;i<=5;i++)
  {
      for(var j=1;j<=i;j++)
      {
        document.write("*");
      }
      document.write("<br/>");
  }*/

  for(var i=1;i<=9;i++)
  {
      for(var j=1;j<=i;j++)
      {
        document.write("<span>"+i+"*"+j+"="+(i*j)+"</span>");
      }
      document.write("<br/>");
  }
  </script>
 </head>

 <body>
  
 </body>
</html>

<script type="text/javascript">
  /*
  
      *       1 : 1  4
     **       2 : 2  3
    ***       3 : 3  2
   ****       4 : 4  1
  *****       5 : 5  0

  */
  for(var i=1;i<=5;i++)
  {
    //先输出空格
    for(var j=1;j<=5-i;j++)
    {
        document.write("&nbsp;");
    }

    //再输出星号
    for(var j=1;j<=i;j++)
    {
        document.write("*");
    }
    document.write("<br/>");
  }
  </script>

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 span
 {
    display:inline-block;
    width:80px;
    border:0px solid red;
 }
  </style>

  <script type="text/javascript">

  /*
  
      *       1 : 1  4
     **       2 : 2  3
    ***       3 : 3  2
   ****       4 : 4  1
  *****       5 : 5  0

  */
  /*for(var i=1;i<=5;i++)
  {
    //先输出空格
    for(var j=1;j<=5-i;j++)
    {
        document.write("&nbsp;");
    }

    //再输出星号
    for(var j=1;j<=i;j++)
    {
        document.write("*");
    }
    document.write("<br/>");
  }*/
  for(var i=1;i<=9;i++)
  {
    //先输出空格
    for(var j=1;j<=9-i;j++)
    {
        document.write("<span></span>");
    }

    //再输出星号
    for(var j=i;j>=1;j--)
    {
        document.write("<span>"+i+"*"+j+"="+(i*j)+"</span>");
    }
    document.write("<br/>");
  }

  </script>
 </head>

 <body>
  
 </body>
</html>