描述:
请补全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)}`