javascript - 根据用户输入在页面上创建金字塔结构图

Question

我想根据用户输入在页面上创建一个类似金字塔的结构，该结构应如下所示，

我尝试在 JS 中循环显示结构，但无法根据用户输入更改 JS 循环中的 css 属性。这是此页面上的代码:

var objContainer = document.getElementById("container"),
  intLevels = 10,
  strBlocksHTML = '';


for (var i = 0; i < intLevels; i++) {

  strBlocksHTML += '<div class="buildingBlock"></div>';

  strBlocksHTML += '<div></div>'; // Line break after each row
}

objContainer.innerHTML = strBlocksHTML;

.buildingBlock {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 2px 5px;
  background-color: #eee;
  border: 2px solid #ccc;
}

#container {
  text-align: center;
}

<div id="container"></div>

输出显示为塔，还想去掉每个 <div> 之间的间距元素。如何使用 jquery 或其他方法更改此设置？上图是我想要的输出。

Answer 1

通过将第一个 strBlocksHTML 行更改为

strBlocksHTML += '<div class="buildingBlock" style="width: ' + Number(20 + 40 * i) + 'px"></div>';

有效。