Создать диаграмму структуры пирамиды на странице из пользовательского ввода

Question

Создать диаграмму структуры пирамиды на странице из пользовательского ввода

0

Я хочу создать структуру на основе пирамиды на странице с пользовательского ввода, и структура должна выглядеть следующим образом:

Я попытался зациклиться на JS, чтобы отобразить структуру, но не могу изменить свойство css в цикле JS в соответствии с пользовательским вводом. Вот код на этой странице 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 или каким-либо другим методом? Вышеупомянутое изображение - желаемый результат, который я хочу.

binaryuser 02 окт. 2013, в 12:06

Источник

Теги:

javascript

jquery

html

css

4 ответа

Ещё вопросы

stafffan · Answer 1 · 2013-10-02T08-39-00.000Z

Изменив первую строку strBlocksHTML на

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

оно работает.

CBroe · Answer 2 · 2013-10-02T07-59-00.000Z

Вы можете просто установить ширину с помощью атрибута style для каждого созданного div и вычислить его динамически - Ive меняет ваш цикл, чтобы бежать назад, примерно так:

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

Измените значения (ширина 250 пикселей, из которых я * 20 вычитается), как вы считаете нужным, соответственно. рассчитать их динамически в зависимости от количества желаемых уровней пирамиды.

А также вам не нужны пустые div для разрывов строк - просто держите свои divs как display: block и задайте маржу для автоматического центрирования.

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

Это прекрасно работает, спасибо за помощь. Действительно ценю это.

Sunil Verma · Answer 3 · 2013-10-02T07-47-00.000Z

вам нужно сделать что-то вроде этого

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

Спасибо за помощь. Я пытался добавить переменную в свойство CSS, но не могу понять, как? Этот код действительно помогает.

Gavriel · Answer 4 · 2013-10-02T07-10-00.000Z

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;