使用 HTML 和 JavaScript 创建金字塔图形

<!DOCTYPE html>
<html>
<head>
    <title>金字塔图形生成器</title>
    <style>
        body {
            font-family: monospace;
            text-align: center;
        }
    </style>
</head>
<body>
    <form>
        <label for="floors">输入塔的层数：</label>
        <input type="number" id="floors" name="floors" min="1" required>
        <button type="submit">打印</button>
    </form>
    <div id="pyramid"></div>
<pre><code>&lt;script&gt;
    document.querySelector('form').addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单提交的默认行为

        var floors = parseInt(document.querySelector('#floors').value);
        var pyramid = document.querySelector('#pyramid');
        pyramid.innerHTML = ''; // 清空上一次的打印结果

        for (var i = 1; i &lt;= floors; i++) {
            var spaces = ' '.repeat(floors - i); // 计算每一行前面的空格数量
            var stars = '*'.repeat(2 * i - 1); // 计算每一行星号的数量

            var row = document.createElement('p');
            row.textContent = spaces + stars;
            pyramid.appendChild(row);
        }
    });
&lt;/script&gt;
</code></pre>
</body>
</html>
<p>这段代码包括一个表单，用户可以在输入框中输入塔的层数，然后点击'打印'按钮来打印相应的金字塔。当用户提交表单时，JavaScript代码会根据输入的层数动态生成金字塔，并将结果显示在页面上。</p>