用html语言实现输入文字用*输出金字塔
时间: 2024-09-28 12:11:39 浏览: 13
在HTML中,你可以使用`<pre>`标签来创建预格式文本,并结合一些简单的CSS来制作金字塔效果。这里是一个基本的例子,用户可以在文本框中输入内容,然后显示一个星号(*)形成的金字塔:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.pyramid {
width: 50%;
margin: auto;
}
.triangle {
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #ccc;
}
</style>
</head>
<body>
<h2>输入文字,显示金字塔:</h2>
<label for="input-text">请输入文字:</label><br>
<input type="text" id="input-text" name="input-text"><br>
<button onclick="generatePyramid()">生成</button>
<pre id="output"></pre>
<script>
function generatePyramid() {
var inputText = document.getElementById('input-text').value;
var pyramidOutput = document.getElementById('output');
// 清空旧的内容
pyramidOutput.innerHTML = '';
// 构建金字塔
for (var i = 0; i < inputText.length; i++) {
var line = '<span class="triangle">';
if (i < inputText.length / 2) {
line += '*'.repeat(i * 2 + 1);
} else {
line += '*'.repeat(inputText.length - i);
}
line += '</span>';
pyramidOutput.innerHTML += line + '\n';
}
}
</script>
</body>
</html>
```
在这个例子中,当点击“生成”按钮时,会根据用户输入的文字长度动态生成相应高度的金字塔。