首页 > 试题广场 >

直角三角形

[编程题]直角三角形
  • 热度指数：61721 时间限制：C/C++ 3秒，其他语言6秒 空间限制：C/C++ 256M，其他语言512M
  • 算法知识视频讲解
请补全JavaScript代码，要求在页面上渲染出一个直角三角形，三角形换行要求使用"br"实现。三角形如下：
*
**
***
算法知识视频讲解
添加回答
HTML/CSS/JavaScript
Helon1995头像 Helon1995
    <script>
      var triangle = document.querySelector(".triangle");
      // 补全代码
      let contents = "";
      for (let i = 1; i < 4; i++) {
        contents += "*".repeat(i) + "<br/>";
      }
      triangle.innerHTML = contents;
    </script>
发表于 2021-12-01 17:30:06 回复(3)
HTML/CSS/JavaScript
邹玄青头像 邹玄青

本题考点：循环、模板字符串
根据题目要求，输出一个直角三角形：

*
**
***

核心步骤有：

  1. 创建一个空字符串，用于存储HTML模板
  2. 外层循环为层数，内存循环为每层的"*"数
  3. 每当内层循环结束时，在字符串后方添加换行

参考答案：

var str = ''
for (var i = 1; i < 4; i++) {
    for (var j = 0; j < i; j++) {
        str += '*'
    }
    str += '<br />'
}
triangle.innerHTML = str
发表于 2021-12-01 19:22:03 回复(1)
HTML/CSS/JavaScript
牛客946213070号头像 牛客946213070号
triangle.innerHTML = new Array(3).fill("").map((_i, i) => "*".repeat(i + 1)).join("<br/>")
发表于 2022-06-20 20:06:04 回复(2)
HTML/CSS/JavaScript
小文同学在努力头像 小文同学在努力 
        <script>
            var triangle = document.querySelector('.triangle');
            // 补全代码
            str = ''
            for(var i=0;i<3;i++) {
                for(var j=0;j<=i;j++) {
                    str += '*';
                }
                str += '</br>';
            }
            triangle.innerHTML = str;
        </script>

发表于 2022-03-19 22:36:11 回复(0)
HTML/CSS/JavaScript
牛客788863032号头像 牛客788863032号
        <script>
            var triangle = document.querySelector('.triangle');
            // 补全代码                                           
            var str = '';                                           // 先创建一个空的变量，用来保存后面要拼接出来的三角形
            for(let i = 0; i < 3; i++){                        // 第一层的循环是控制行数的；i<3 这里行数就是3行，这里是从0开始的，i的值分别是（0,1,2）这3次都符合循环的条件，所以执行3次。
                for(let j = 0; j <= i;j++){                    // 第二层循环是控制每一行*的数量的；这里很巧妙用i的值，i控制行数的同时也在控制*的个数（但是注意这里条件要写等于号，不然会少一个*）
                    str += '*';                                     // 第二层循环控制这里拼接几次
                }
                str += '<br/>'                                   // 第一层循环控制这里，在第二层循环完毕后在末尾拼接<br/>起到换行的作用
            }
            triangle.innerHTML = str                    // triangle.innerHTML 这里的作用是将str以html的形式渲染到页面上。
        </script>

发表于 2023-01-17 11:50:30 回复(0)
__sgf__头像 __sgf__ 
str = '*' + '<br>' + '**' + '<br>' + '***' + '<br>'
triangle.innerHTML = str
发表于 2021-12-21 17:02:49 回复(17)
HTML/CSS/JavaScript
牛客386827830号头像 牛客386827830号
我是直男：triangle.innerHTML = '*<br/>**<br/>***<br/>'
发表于 2022-11-30 22:23:41 回复(1)
HTML/CSS/JavaScript
福行天下头像 福行天下 
triangle.innerHTML = '*<br/>**<br/>***'

发表于 2022-03-10 14:51:55 回复(3)
HTML/CSS/JavaScript
Janekei头像 Janekei
            var triangle = document.querySelector('.triangle');
            // 补全代码
            let arr = ['*','**','***']
            arr.forEach(item =>{
                return triangle.innerHTML += item +'<br>'
            })
发表于 2023-03-20 15:47:46 回复(0)
HTML/CSS/JavaScript
秋落有声头像 秋落有声
<script>
            var triangle = document.querySelector('.triangle');
            // 补全代码
            var arr = ['*'];
            for (var k = 1; k < 3; k++) {
                arr.push(arr[k-1] + '*');
            }
            triangle.innerHTML = arr.join('<br/>');
        </script>
发表于 2023-03-02 11:10:45 回复(0)
诗奕头像 诗奕 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div class='triangle'></div>
        <script>
            var triangle = document.querySelector('.triangle');
            // 补全代码
            str = ''
            for(var i=0;i<3;i++) {
                for(var j=0;j<=i;j++) {
                    str += '*';
                }
                str += '</br>';
            }
            triangle.innerHTML = str;
        </script>
    </body>
</html>

编辑于 2024-04-16 20:56:35 回复(0)
性感大宝剑头像 性感大宝剑 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="triangle"></div>

    <script>
      var triangle = document.querySelector('.triangle')
      // 补全代码，尽量写的有点拓展性吧
      let str = '', char = '*', len = 3
      for (let i = 0; i < len; i++) {
        for (let j = 0; j <= i; j++) {
          str += char
        }
        str += '<br>'
      }
      triangle.innerHTML = str
    </script>
  </body>
</html>
编辑于 2024-03-22 19:36:06 回复(0)
HTML/CSS/JavaScript
码上到_头像 码上到_ 
// 补全代码
   triangle.innerHTML="*<br>**<br>***"

发表于 2023-05-30 17:53:22 回复(0)
HTML/CSS/JavaScript
在拧螺丝的西红柿很喜欢走神头像 在拧螺丝的西红柿很喜欢走神
  <script>
            var triangle = document.querySelector('.triangle');
            // 补全代码
           // triangle.innerHTML='*<br>**<br>***<br>'
            var fragment = [];
            function canvasTriangle(n){
               var str = '';
               for(var i=0;i<n;i++){
                   str+='*'
               }
                fragment.unshift(str+'<br>')
               n-=1
               triangle.innerHTML = fragment.join('')
               if(n>0){
                   canvasTriangle(n)
               }
           }
            canvasTriangle(3)
        </script>
发表于 2022-10-28 16:42:31 回复(0)
HTML/CSS/JavaScript
Serve头像 Serve 
<script>
    var triangle = document.querySelector('.triangle');
    // 补全代码
    triangle.innerHTML = "*<br/>**<br/>***";
</script>

发表于 2022-03-21 21:22:40 回复(0)
幸运的加菲猫在做核酸头像 幸运的加菲猫在做核酸
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div class='triangle'></div>

        <script>
            var triangle = document.querySelector('.triangle');
            // 补全代码
         
           triangle.innerHTML = "*<br/>**<br/>***"
        </script>
    </body>
</html>
发表于 2024-09-23 14:45:02 回复(0)
牛客985418137号头像 牛客985418137号
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div class='triangle'></div>

        <script>
            var triangle = document.querySelector('.triangle');
            var fragment = document.createDocumentFragment();
            fragment.innerHTML = ""
            // 补全代码
            for(let i = 1; i <= 3; i++) {
                let str = `<div>${'*'.repeat(i)}</div><br/>`
                fragment.innerHTML += str
            }
            triangle.innerHTML = fragment.innerHTML
        </script>
    </body>
</html>
发表于 2024-09-05 10:31:28 回复(0)
魔力sama头像 魔力sama
triangle.innerHTML = '*<br/>**<br/>***<br/>'
要什么就给什么，没有循环就不添了 XD
发表于 2024-08-06 15:33:49 回复(0)
debug人生头像 debug人生
<script>
            var triangle = document.querySelector('.triangle');
            // 补全代码
            function getRow(num) {
                let result = ''
                const startArray = new Array(num).fill('*')
                for(let i = 0; i < num; i++) {
                    result = result + `<div>${startArray.slice(0, i + 1).join('')}</div></br>`
                }
                return result
            }
            triangle.innerHTML = getRow(3)
        </script>
发表于 2024-07-11 16:00:42 回复(0)
HTML/CSS/JavaScript
牛客459175773号头像 牛客459175773号
     var tr=''
            for(var i=1;i<4;i++){
                    tr+='*'.repeat(i)+"<br/>"
                }

发表于 2024-04-10 18:46:57 回复(0)
提交观点

问题信息

Javascript
难度：
74条回答 1317浏览

热门推荐

通过挑战的用户

查看代码

相关试题

直角三角形

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号