带有setInterval的Javascript createElement_Javascript_Html_Setinterval_Createelement

带有setInterval的Javascript createElement

javascript html

带有setInterval的Javascript createElement,javascript,html,setinterval,createelement,Javascript,Html,Setinterval,Createelement,所以，我在一个小任务上遇到了一些问题，我正试图完成这个小任务，我有点被困在这一点上我正在制作一个应用程序，当我点击一个按钮时，该应用程序会在setInterval循环中使用createElement创建div，在1秒（约50毫秒）内生成多达20个div。我也可以停止间歇，然后重新开始。这是一个20px 20px的红色小盒子。代码如下： <script> var box; var counter = 0; function makeNew() {

所以，我在一个小任务上遇到了一些问题，我正试图完成这个小任务，我有点被困在这一点上

我正在制作一个应用程序，当我点击一个按钮时，该应用程序会在setInterval循环中使用createElement创建div，在1秒（约50毫秒）内生成多达20个div。我也可以停止间歇，然后重新开始。这是一个20px 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>


var盒；
var计数器=0；
函数makeNew（）{
document.body.appendChild(
document.createElement（'box'）；
计数器++；
document.getElementById（'boks'）。innerHTML=计数器；
}
函数startInterval（）{
box=setInterval（函数（）{lagNy（）}，50）；
}
函数间隔（）{
净空间隔（盒）；
}

我真正需要帮助的是，我希望在这些div中打印数字，并且它会随着每个创建的div（box）而递增。像这样：盒子1（1）、盒子2（2）、盒子3（3）等等

这方面有什么想法、建议或帮助吗

非常感谢您的帮助

保留对元素的引用。将您想要的文本附加到它

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

保留对元素的引用。将您想要的文本附加到它

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

试试看

HTML

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

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

更新： 看看你的问题，你可能想得到这个

试试看

HTML

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

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

更新： 看看你的问题，你可能是想得到这个

是

lagNy

makeNew

？旁注：

box=setInterval（函数（）{lagNy（）}，50）

是编写

box=setInterval（lagNy，50）的一种非常冗长的方法：-）没有框
标记。将其更改为div
.T.J Crowder-lagNy等于makeNew yes:）谢谢你的提示Crowder；）是lagNy
makeNew
？旁注：box=setInterval（函数（）{lagNy（）}，50）
是编写box=setInterval（lagNy，50）的一种非常冗长的方法：-）没有框
标记。将其更改为div
.T.J Crowder-lagNy等于makeNew yes:）谢谢你的提示Crowder；）另外，我建议使用setTimeout
s而不是setInterval
。他希望继续进行divs，直到单击停止按钮，这样setInterval在这里就可以了。使用setTimeout时，您必须使用递归并设置一个停止标志。我知道在setTimeout
的情况下必须使用递归，但在某些情况下，当您使用setInterval
时，有些细微差别会破坏代码。John Resig在这个主题上读了一篇很好的文章：我还建议使用setTimeout
s而不是setInterval
。他想继续制作divs，直到单击停止按钮，这样setInterval在这里就可以了。使用setTimeout时，您必须使用递归并设置一个停止标志。我知道在setTimeout
的情况下必须使用递归，但在某些情况下，当您使用setInterval
时，有些细微差别会破坏代码。约翰·雷斯格（John Resig）在这个主题上读了一篇很好的文章：HTML中没有box
标记（元素）。@KarlenKishmiryan-这是OP的错误，但我现在已经在这里更正了。HTML中没有box标记（元素）。@KarlenKishmiryan-这是OP的错误，但我现在已经在这里更正了。
function makeNew() {

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

  document.body.appendChild(box);

        counter++;
}