直角三角形--JavaScript刷题（牛客）_用javascript输出直角三角形图案—

本文链接：https://blog.csdn.net/weixin_50632313/article/details/134218613

描述：

请补全JavaScript代码，要求在页面上渲染出一个直角三角形，三角形换行要求使用"br"实现。三角形如下：
*
**
***

法一：for循环的嵌套

思路：

1.创建content变量，用于存储“直角三角形”

2.第一层（外层）循环控制行【for】，一共三行【let i = 1; i <= 3; i++】

3.第二层（内层）循环控制列【for】，即控制每一行里面的内容如何展示。【逐行增加一颗星，每一行的星星数量等于行序数（第一行一颗星，第二行两颗星......） j <= i，content = content + '*'】

4.在当前行的星星都输出后需要换行，所以在内层循环外面、外层循环里面进行换行【'</br>'】

<body>
   <div class='triangle'></div>

   <script>
      var triangle = document.querySelector('.triangle');
      // 补全代码
      var content = ''
      for(let i = 1; i <= 3; i++){
         for(let j = 1; j <= i; j++){
             content = content + '*' 
         }
         content = content + '<br/>'
      }
      triangle.innerHTML = content
    </script>
</body>

<body>
    <div class='triangle'></div>

    <script>
        var triangle = document.querySelector('.triangle');
        // 补全代码
        // 先创建一个空的变量，用于保存拼接出来的三角形
        var content = ''
        // 外层控制行数
        for (let i = 1; i <= 3; i++) {
            // 内层控制列数
            // 注意：j<=i是巧妙之处----第1行1颗星换行，第2行2颗星换行...
            for (let j = 1; j <= i; j++) {
                content = content + '*'  //方式1
                // content = '*'*j  //方式1易错点
            }
            // 注意：是在这里换行----
            content = content+'<br/>'
        }
        triangle.innerHTML = content  //方式1易错点导致的结果：页面中显示的是NaN   表示非数值(Not a Number)
    </script>
</body>

法二：一层循环+repeat()

思路：

1.创建content变量，用于存储“直角三角形”

2.一层循环控制行数【for】，一共三行【let i = 1; i <= 3; i++】

3.在for循环里面输出当前行的星星【repeat(i)】，并将每一行的内容拼接在一起【content = content + ...】

<body>
   <div class='triangle'></div>

   <script>
      var triangle = document.querySelector('.triangle');
      // 补全代码
      var content = ''
      for(let i = 1; i <= 3; i++){
         content = content + '*'.repeat(i) + '<br/>'
         //上面一行也可以使用模板字符串`${}`实现
         //content = content + `${'*'.repeat(i)}<br/>`
      }
      triangle.innerHTML = content
   </script>
</body>

模板字符串`${}`是一种允许我们插入变量、表达式、函数调用等内容到字符串中的方法，使用${}将这些内容包裹起来，可以使其成为字符串的一部分。例子：`Hi, ${'*'.repeat(i)}`