Javascript createElement with setInterval

因此，即使有一個小任務即時通訊嘗試完成一些問題，我還挺卡在這一點。Javascript createElement with setInterval

我做了一個應用程序，當我點擊一個按鈕時，應用程序在setInterval循環中創建了帶createElement的div，在1秒內（約50 Ms）製作了多達20個div。我也可以停止間隔，然後重新開始。這會產生一個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）等....

任何想法，提示或幫助與這個嗎？

非常感謝幫助！

來源

2014-05-15 user3071160

是''lagNy' makeNew'？ –

注意：'box = setInterval（function（）{lagNy（）}，50）;''是寫一個非常冗長的方法'box = setInterval（lagNy，50）;'。 :-) –

沒有'box'標籤。將其更改爲'div'。 –

嘗試this demo。

HTML

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

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

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/

來源

2014-05-15 10:08:19

另外，我會建議使用'setTimeout's而不是'setInterval'。 –

他想繼續製作div，直到停止按鈕被點擊，所以setInterval在這裏很好。用setTimeout你必須使用遞歸併設置一個標誌停止。 –

我知道你必須在'setTimeout'的情況下使用遞歸，但是在使用'setInterval'的時候，在某些情況下會破壞代碼。這是John Resig在該主題上的一篇很好的閱讀：http://ejohn.org/blog/how-javascript-timers-work/ –

保留對元素的引用。追加你想要的文字。

counter++; 
var box = document.createElement('div'); // Use a real HTML element 
box.appendChild(
    document.createTextNode(counter) 
); 
document.body.appendChild(box);

來源

2014-05-15 10:05:13 Quentin

HTML中沒有'box'標記（元素）。 –

@KarlenKishmiryan - 這是OP的錯誤，但我現在在這裏糾正它。 – Quentin

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

來源

2014-05-15 10:12:12 jeoj

function makeNew() { 

    var box = document.createElement("div"); 
    var boxText = document.createTextNode(counter); 
    box.appendChild(boxText); 

    document.body.appendChild(box); 

     counter++; 
}

來源

2014-05-15 10:18:03 pnkz

Javascript createElement with setInterval

回答

相關問題