js文件实现图中效果,运用for循环写并且每个输出都有框框包裹
html代码如下,不知道这个框线是要用什么符号,大概逻辑看代码就懂了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="text" id="input" placeholder="输入直角三角形的层数"/>
<button onclick="create()">生成</button>
</form>
<script>
function create() {
let num = document.getElementById("input").value;
if (num === '') {
alert('请输入内容');
return false;
}
if (!(/(^[1-9]\d*$)/.test(num))) {
alert('输入的不是正整数');
return false;
}
for (let i = 1; i <= num; i++) {
let char = '#';
if (i % 2 === 0) {
char = '* ';
}
for (let j = 0; j < i; j++) {
document.write('一');
}
document.write('<br>')
document.write('|');
for (let j = 0; j < i; j++) {
document.write(char + '|');
}
document.write('<br>')
}
for (let i = 0; i < num; i++) {
document.write('一')
}
document.write('<br>')
}
</script>
</body>
</html>
效果图