直角三角形、等腰三角形、倒三角、空心等腰三角形(javascript实现)

LxyingINGing

已于 2023-12-09 15:23:35 修改

阅读量2.7k

点赞数 2

文章标签：前端 javascript html

于 2023-09-17 16:29:08 首次发布

本文链接：https://blog.csdn.net/LxyingINGing/article/details/131995464

版权

本文介绍了使用JavaScript通过循环语句实现的四种三角形图案，包括直角三角形、等腰三角形、倒三角以及空心等腰三角形的代码及分析。

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

一、直角三角形

1.分析：每行星的个数都等于行号，用循环语句来实现。

代码如下：

   <script>
     //外层循环控制行数
     for(var i=1;i<=5;i++){
        //内层循环控制列数
        for(var j=1;j<=i;j++){
            document.write('*');
        }
        document.write('<br>');
    </script>

二、等腰三角形

1.分析：

代码如下：

<script>
    //外层循环控制行数
     for(var i=1;i<=5;i++){
        //内层循环控制列数
        for(var k=1;k<=5-i;k++){
            document.write('&nbsp;')  //空格
         }
        for(var j=1;j<=2*i-1;j++){
            document.write('*');
         }
            document.write('<br>')
      }
</script>

三、倒三角

1.分析：外层控制行数，内层控制列数；外层走一个，内层走一轮。

代码如下：

<script>
   var str='';// 用于存放拼接好的倒三角形
     // 外层控制行数
     for(var i=5;i>=0;i--){
        //内层控制每行空格的个数
        for(var k=1;k<=5-i;k++){
            str+='&nbsp;'
        }
        //内层控制每行星的个数
        for(var j=1;j<=2*i-1;j++){
            str+='*';
        }
        str+='<br>';
    }
    document.write(str);
 </script>

四、空心等腰三角形

空心的等腰三角形
// 行号星数空格
//
// * 1 1 2 0 2
// * * 2 3 1 1 1
// ***** 3 5 0 0 0

<script>
        var n = +prompt('请输入等腰三角形的行高');
        var str='';
        for (var i = 1; i <= n; i++) {
            for (var k = 1; k <= n - i; k++) {
                str+='&ensp;&nbsp;';
            }
            for (var j = 1; j <= 2 * i - 1; j++) {
                if (j == 1 || j == 2 * i - 1 || i == n) {
                    str+='★';
                } else {
                    str+='&ensp;&nbsp;';
                }
            }
            str+='<br>';
        }
       document.write(str);
    </script>

注意：&emsp;与&ensp;的区别：

&emsp;代表一个全角空格，它的宽度相当于汉字的笔画宽度。在排版中，它通常被用来替代普通的空格，以增加文字之间的间距，使排版更加美观。

&ensp;则代表一个半角空格，它的宽度相当于英文字符的笔画宽度。在排版中，它通常被用来表示单词之间的分隔，或者在数学符号前后添加空格。