0

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

我试图在 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 或其他方法来更改它？上图是我想要的输出。

4

4 回答 4

1

通过将第一个 strBlocksHTML 行更改为

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

有用。

于 2013-10-02T10:00:13.857 回答
1

您可以通过每个创建的 div 上的样式属性简单地设置宽度，并动态计算它 - 我已经将您的循环更改为向后运行，如下所示：

for(var i=intLevels; i>0; --i) {
    strBlocksHTML += '<div class="buildingBlock" style="width:'+(250-i*20)+'px"></div>';
}

更改您认为合适的值（从其中减去 i*20 的 250px 宽度），分别。根据所需的金字塔级别数动态计算它们。

而且你不需要空的 div 来换行 - 只需将你的 div 保持为 display:block，并将边距设置为 auto 以使它们居中。

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

for (var i = intLevels; i > 0; --i) {

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

objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
  height: 20px;
  margin: auto;
  background-color: #eee;
  border: 2px solid #ccc;
}

#container {
  text-align: center;
}
<div id="container"></div>

于 2013-10-02T10:00:15.840 回答
1

你需要做这样的事情

for( var i=0; i<intLevels; i++ ){
    var wd = 20 * i;
    strBlocksHTML += '<div class="buildingBlock" style="width:'+wd+'px"></div>';

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


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


for (var i = 0; i < intLevels; i++) {
  var wd = 20 * i;
  strBlocksHTML += '<div class="buildingBlock" style="width:' + wd + 'px;"></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;
  margin-top: -20px;
}

#container {
  text-align: center;
}
<div id="container"></div>

您可以使用 css 将这些更紧密地对齐

于 2013-10-02T10:01:40.117 回答
1 

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


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

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

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

objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  background-color: #eee;
  border: 2px solid #ccc;
}

#container {
  text-align: center;
}
<div id="container"></div>

于 2013-10-02T10:02:59.103 回答