JS打印三角形

一时失言乱红尘 2024-04-17 20:36 46阅读 0赞

**直角三角形**  
![图一][20190831191852844.png]  
图一

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
        for(let j=0;j<4;j++)
    {
         
           for(let i=0;i<=j;i++)
        {
         
            document.write("*");
        }
        document.write("<br/>");
    }
        </script>
    </head>
    <body>
    
    </body>
    </html>

![图二][20190831191906925.png]  
图二

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
        for(let j=4;j>0;j--)
    {
         
           for(let i=0;i<j;i++)
        {
         
            document.write("*");
        }
        document.write("<br/>");
    }
        </script>
    </head>
    <body>
    
    </body>
    </html>

在画直角三角形的基础上，可以延伸出乘法表的写法，具体如下：  
![在这里插入图片描述][20190831193844158.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
        for(var j=1;j<9;j++){
         
           for(var i=1;i<=j;i++){
         
            document.write(i+"×"+j+"="+i*j+"&nbsp");
        }
        document.write("<br/>");
    }
        </script>
    </head>
    <body>
    
    </body>
    </html>

**锐角三角形**  
相对与直角三角形的写法，在整体结构上，锐角三角形只是在循环输出星号开始之前加了一个输出空格符号的一段for语句，其空格的输出写法思路和星号递减的写法思路大同小异。  
![在这里插入图片描述][20190831194954865.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
        for(let j=0;j<4;j++){
         
            for(let a=3;a>j;a--){
         
                document.write("&nbsp");//相对与直角三角形的写法，在整体结构上，锐角三角形只是在循环输出星号开始之前加了一个输出空格符号的一段for语句，其空格的输出写法思路和星号递减的写法思路大同小异。
            }
           for(let i=0;i<=j;i++){
         
            document.write("*");
        }
    
        document.write("<br/>");
    }
        </script>
    </head>
    <body>
    
    </body>
    </html>

![在这里插入图片描述][20190831200132860.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
        for(let j=4;j>0;j--){
         
            for(let a=4;a>j;a--){
         
                document.write("&nbsp");//相对与直角三角形的写法，在整体结构上，锐角三角形只是在循环输出星号开始之前加了一个输出空格符号的一段for语句，其空格的输出写法思路和星号递减的写法思路大同小异。
            }
           for(let i=0;i<j;i++){
         
            document.write("*");
        }
    
        document.write("<br/>");
    }
        </script>
    </head>
    <body>
    
    </body>
    </html>

**菱形**  
![在这里插入图片描述][20190831201213422.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
        for(let j=0;j<4;j++){
         
          for(let a=3;a>j;a--) {
         
            document.write('&nbsp');
          }
          for(let i=0;i<=j;i++){
         
            document.write('*');
          }
          document.write('<br/>');
        }
        for(let j=3;j>0;j--){
         
          for(let a=3;a<j;a++){
         
            document.write('&nbsp');
          }
          for(let i=0;i<j;i++){
         
            document.write('*');
          }
          document.write('<br/>');
        }
        </script>
    </head>
    <body>
    
    </body>
    </html>

[20190831191852844.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ab47f45b12064d69b229bc1f5d9f1c23.png
[20190831191906925.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/306f16a00a1245f496bd3a65f1f1b2d6.png
[20190831193844158.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9c425bb38002456ca250af7566fb6b8d.png
[20190831194954865.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6d8625fba8424f738aab96e9ecbb43e3.png
[20190831200132860.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3667af610a1b446391a1ede46554656e.png
[20190831201213422.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3eb4fa34b61e45d78a50e8120057e0ed.png