用html循环和‘*’号和空格符号绘制一个菱形, 要求: 1、可以从键盘输入菱形的规格(行数) 2、输出对应的菱形
时间: 2024-09-29 20:11:18 浏览: 60
要使用HTML和JavaScript来绘制用户输入行数的菱形,你可以创建一个简单的交互式表单让用户输入行数,然后利用数组和字符串拼接的方式来构建菱形。下面是一个基本的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>绘制菱形</title>
<script>
function drawDiamond() {
var rows = parseInt(document.getElementById('rows').value);
if (isNaN(rows) || rows % 2 !== 1) {
alert("请输入奇数行数");
return;
}
var diamond = [];
for (var i = 0; i < rows; i++) {
var spaces = " ".repeat((rows - i - 1) / 2);
var stars = "*".repeat(i * 2 + 1);
diamond.push(spaces + stars + spaces);
}
// 创建一个虚拟的textarea显示菱形
var output = document.createElement('pre');
output.textContent = diamond.join('\n');
document.body.appendChild(output);
}
</script>
</head>
<body>
<label for="rows">请输入菱形的行数:</label>
<input type="number" id="rows" oninput="drawDiamond()">
<button onclick="drawDiamond()">绘制</button>
</body>
</html>
```
在这个示例中,当用户在文本框中输入菱形行数并点击“绘制”按钮时,会触发`drawDiamond`函数。这个函数根据用户输入计算出每个位置应该放置多少空格和星号,并将其组合成一个字符串数组,最后将这些字符串按行连接起来形成菱形。
阅读全文