从用户输入在页面上创建金字塔结构图

Question

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

我尝试在JS中循环显示结构但不能根据用户输入更改JS循环中的css属性。以下是此页面上的代码http://jsfiddle.net/Q8KUS/87/

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;

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

Answer 1

将第一个strBlocksHTML行更改为

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

它有效。

Answer 2

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

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，并将margin设置为auto以使它们居中。

http://jsfiddle.net/Q8KUS/88/

Answer 3

你需要做这样的事情

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
}

http://jsfiddle.net/kyYCC/

你可以使用css

将这些更接近

Answer 4

http://jsfiddle.net/flocsy/Q8KUS/90/

.buildingBlock {
    display:block;
    width:20px;
    height:20px;
    margin:0 auto;
    background-color:#eee;
    border:2px solid #ccc;
}
#container {
    text-align:center;
}

和

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;