用html文件实现输入数字输出*金字塔右对齐
时间: 2024-09-27 15:14:59 浏览: 21
HTML可以结合CSS来创建简单的数字金字塔效果。下面是一个基本的例子,演示如何在HTML文件中输入一个数字n,然后使用CSS实现一个右对齐的星号金字塔:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.number-pyramid {
text-align: right;
}
.pyramid-row {
display: flex;
flex-wrap: wrap;
}
.pyramid-cell {
width: 5px; /* 根据需要调整单元格宽度 */
margin-right: 1px; /* 控制空隙 */
}
.n-digit {
counter-reset: digit;
}
.pyramid-row:nth-child(odd) .pyramid-cell::before {
content: counter(digit);
counter-increment: digit;
}
</style>
</head>
<body>
<input type="number" id="input-number" oninput="buildPyramid(this.value)">
<div id="pyramid-container"></div>
<script>
function buildPyramid(n) {
const container = document.getElementById('pyramid-container');
container.innerHTML = '';
for (let i = 0; i < n; i++) {
const row = document.createElement('div');
row.classList.add('pyramid-row');
for (let j = 0; j <= i; j++) {
const cell = document.createElement('div');
cell.classList.add('pyramid-cell', `digit-${j}`);
row.appendChild(cell);
}
container.appendChild(row);
}
}
</script>
</body>
</html>
```
在这个例子中,用户可以在`<input>`标签中输入数字,比如5,然后点击输入后,会动态生成一个高度为输入数字的星号金字塔。每个行的单元格数等于当前行的索引加一。