JS打印三角形

最新推荐文章于 2024-10-24 11:45:55 发布

猜不到我是谁

最新推荐文章于 2024-10-24 11:45:55 发布

阅读量8.8k

点赞数 6

分类专栏： js 文章标签： JS基础

本文链接：https://blog.youkuaiyun.com/qq_43043859/article/details/100176201

版权

js 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了如何用JavaScript基础实现直角和锐角三角形的打印，以及如何在此基础上扩展到菱形的绘制。通过循环和条件判断，控制空格和星号的输出来形成不同的几何形状。

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

直角三角形

图一

<!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>

图二

<!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>

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

<!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语句，其空格的输出写法思路和星号递减的写法思路大同小异。
在这里插入图片描述

<!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>

在这里插入图片描述

<!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>

菱形
在这里插入图片描述

<!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>