在js中 在页面提示用户输入一个整数,当用户输入的值大于5时,在页面输出一个倒三角形,当输入值小于或等于5时,在页面上输出倒正三角形
时间: 2024-10-11 14:05:20 浏览: 11
在JavaScript中,你可以通过监听用户的输入事件,然后根据输入值动态生成相应的图形。下面是一个简单的示例,使用HTML、CSS和JavaScript实现这个功能:
首先,创建一个HTML元素让用户输入整数:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Triangle Generator</title>
</head>
<body>
<input type="number" id="triangleInput" placeholder="Enter an integer">
<button onclick="generateTriangle()">Generate</button>
<div id="triangle"></div>
<script src="script.js"></script>
</body>
</html>
```
然后,在`script.js`文件中编写JavaScript函数:
```javascript
function generateTriangle() {
const input = document.getElementById('triangleInput');
const triangleValue = parseInt(input.value);
if (isNaN(triangleValue) || triangleValue <= 0) {
alert("Please enter a positive integer.");
return;
}
let result = '';
for (let i = 1; i <= triangleValue; i++) {
result += '*'.repeat(i);
if (i < triangleValue) {
result += '\n';
} else {
result += ' \n' + '*'.repeat(triangleValue - 1) + '\n';
}
}
document.getElementById('triangle').innerText = result;
}
```
在这个例子中,如果用户输入的是非数字或者0及以下,会弹出警告;如果输入有效,它将根据用户输入的数值生成对应大小的倒三角形(如果大于5),或者倒正三角形(如果不大于5)。每个星号(*)代表一个空格,换行符(\n)用于在每个新行。