用戶輸入創建一個頁面上的金字塔結構圖

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>'; 
} 

變化值（250像素如你所見，我相信你會減去我* 20的寬度）。根據想要的金字塔等級數量動態計算它們。

而且你不需要換行空白的div - 只需將你的div保持爲display：block，並將margin設置爲自動將它們居中。

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/

可以allign這些通過使用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;