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

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

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

var objContainer=document.getElementById（“容器”），
intLevels=10，
strBlocksHTML=''；
对于（变量i=0；i
.buildingBlock{
显示：内联块；
宽度：20px；
高度：20px；
保证金：2p5px；
背景色：#eee；
边框：2个实心#ccc；
}
#容器{
文本对齐：居中；
}
将第一行strBlocksHTML更改为

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

strBlocksHTML+=''；

将第一行strBlocksHTML更改为

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

strBlocksHTML+=''；

它可以工作。
您可以通过每个创建的div上的style属性简单地设置宽度，并动态地计算它–我已将您的循环更改为向后运行，类似这样：

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

您可以通过每个创建的div上的style属性简单地设置宽度，并动态地计算它–我已将您的循环更改为向后运行，类似这样：

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

你需要做这样的事情

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
}

你需要做这样的事情

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（“容器”），
intLevels=10，
strBlocksHTML=''；
对于（变量i=0；i
.buildingBlock{
显示：块；
宽度：20px；
高度：20px；
保证金：0自动；
背景色：#eee；
边框：2个实心#ccc；
}
#容器{
文本对齐：居中；
}

var objContainer=document.getElementById（“容器”），
intLevels=10，
strBlocksHTML=''；
对于（变量i=0；i
.buildingBlock{
显示：块；
宽度：20px；
高度：20px；
保证金：0自动；
背景色：#eee；
边框：2个实心#ccc；
}
#容器{
文本对齐：居中；
}
谢谢你的帮助。我曾试图在css属性中添加var，但无法真正理解它，如何添加？这段代码真的很有用。谢谢你的帮助。我曾试图在css属性中添加var，但无法真正理解它，如何添加？这段代码真的很有帮助。