1. 弹出输入框,获取输入的层数, 2. 使用isNaN判断用户输入的数据是否合法 3. 使用for循环遍历金字塔, 用*号代表输出 html+js同一个文件
时间: 2024-09-29 22:09:44 浏览: 36
解析使用js判断只能输入数字、字母等验证的方法(总结)
5星 · 资源好评率100%
为了创建一个HTML页面并使用JavaScript获取用户输入的层数、验证输入是否合法以及生成金字塔,你可以这样做:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>金字塔</title>
<style>
.pyramid {
margin-top: 20px;
}
</style>
</head>
<body>
<input type="number" id="level-input" placeholder="请输入层数">
<button onclick="generatePyramid()">生成金字塔</button>
<div class="pyramid" id="output"></div>
<script>
function generatePyramid() {
// 获取用户输入的层数
const levelInput = document.getElementById("level-input");
let level = parseInt(levelInput.value);
// 验证输入是否为数字且大于0
if (isNaN(level) || level <= 0) {
alert("输入数据非法,请输入一个正整数!");
return;
}
// 初始化输出变量
let output = document.getElementById("output");
// 清空之前的输出
output.innerHTML = "";
// 使用for循环遍历金字塔
for (let i = 0; i < level; i++) {
let row = "";
// 每行星星的数量递增
for (let j = 0; j <= i; j++) {
row += "* ";
}
// 每隔一行换行
if (i !== 0) {
row += "\n";
}
output.innerHTML += row;
}
}
</script>
</body>
</html>
```
在这个示例中,我们首先创建了一个输入框让用户输入层数,然后点击按钮会触发`generatePyramid`函数。这个函数获取输入值,如果输入不是有效数值,则弹出警告。如果输入合法,它会在一个`<div>`元素中生成一个金字塔。
阅读全文