Javascript createElement с setInterval

Итак, у меня есть несколько проблем с небольшой задачей, которую я пытаюсь выполнить, и я как бы застрял на этом этапе.

Я делаю приложение, которое, когда я нажимаю кнопку, создает элементы div с помощью createElement в цикле setInterval, создавая до 20 элементов div за 1 секунду (около 50 мс). Я также могу остановить интервал и начать его снова. Получится маленькое красное поле размером 20px X 20px. Вот код:

<script>    
    var box;
    var counter = 0;

    function makeNew() {
        document.body.appendChild(
            document.createElement('box'));
                counter++;
                document.getElementById('boks').innerHTML = counter;
    }

    function startInterval() {
        box = setInterval(function () { lagNy() }, 50);

    }
    function stoppInterval() {
        clearInterval(box);
    }
</script>

<body>
    <input type="button" id="start" value="Generer" onclick="startInterval();" /> 
    <input type="button" id="stopp" value="Stopp" onclick="stoppInterval();" />
</body>

В чем мне действительно нужна помощь, так это в том, что я хочу, чтобы числа печатались внутри этих div, и они увеличиваются с каждым созданным div (полем). Вот так: box1(1), box2(2), box3(3) и т.д....

Любые идеи, советы или помощь с этим?

Помощь приветствуется!


javascript html setinterval createelement
person user3071160    schedule 15.05.2014    source источник
comment
Примечание: box = setInterval(function () { lagNy() }, 50); — это очень многословный способ написать box = setInterval(lagNy, 50);. :-)   -  person T.J. Crowder    schedule 15.05.2014
comment
Тега box нет. Измените его на div.   -  person Karlen Kishmiryan    schedule 15.05.2014
comment
T.J Crowder - lagNy равно makeNew yes :) Спасибо за подсказку Crowder ;)   -  person user3071160    schedule 15.05.2014

Ответы (3)


arrow_upward
3
arrow_downward

Попробуйте эту демонстрацию.

HTML

<input type="button" id="start" value="Generer" onclick="startInterval();" />
<input type="button" id="stopp" value="Stopp" onclick="stoppInterval();" />

<p id="boks"></p>

JS

var timer,
    counter = 0;

function makeNew() {
    document.body.appendChild( document.createElement('div') );
    counter++;
    document.getElementById('boks').innerHTML += 'box('+counter+'),';
}

function startInterval() {
    timer = setInterval(makeNew, 50);

}

function stoppInterval() {
    clearInterval(timer);
}

Обновление: Глядя на ваш вопрос, возможно, вы пытаетесь получить этот http://jsfiddle.net/aamir/84HgL/2/

person Aamir Afridi    schedule 15.05.2014
comment
Также я бы рекомендовал использовать setTimeouts вместо setInterval. - person Karlen Kishmiryan; 15.05.2014
comment
Он хочет продолжать создавать div до тех пор, пока не будет нажата кнопка остановки, поэтому setInterval здесь подходит. с setTimeout вы должны использовать рекурсию и установить флаг для остановки. - person Aamir Afridi; 15.05.2014
comment
Я знаю, что вы должны использовать рекурсию в случае setTimeout, но есть некоторые нюансы, которые ломают код в некоторых случаях, когда вы используете setInterval. Вот хорошая статья Джона Резига на эту тему: ejohn.org/blog/how -javascript-таймеры-работают - person Karlen Kishmiryan; 15.05.2014

arrow_upward
3
arrow_downward

Сохраняйте ссылку на элемент. Добавьте к нему нужный текст.

counter++;
var box = document.createElement('div'); // Use a real HTML element
box.appendChild(
    document.createTextNode(counter)
);
document.body.appendChild(box);
person Quentin    schedule 15.05.2014
comment
В HTML нет тега (элемента) box. - person Karlen Kishmiryan; 15.05.2014
comment
@KarlenKishmiryan — это ошибка ОП, но я исправил ее здесь. - person Quentin; 15.05.2014

arrow_upward
0
arrow_downward

http://jsfiddle.net/Cs49D/

var box;
var counter = 0;

function makeNew() {
    counter++;
    var new_box = document.createElement('div');
    new_box.setAttribute("class", "box");
    new_box.innerHTML = counter;
    document.body.appendChild(new_box);
}

function startInterval() {
    box = setInterval(function () { makeNew() }, 50); 
}

function stoppInterval() {
    clearInterval(box);
}
person jeoj    schedule 15.05.2014