带setInterval的Javascript setInterval
带setInterval的Javascript setInterval
提问于 2014-05-15 10:02:15
所以，我在一个小任务中遇到了一些问题，我想要完成这个任务，而我在这一点上还有点卡住了。
我正在制作一个应用程序，当我点击一个按钮时，应用程序在一个createElement循环中创建div，在1秒(大约50毫秒)内产生多达20div的div。我也可以停止间隔，然后重新启动它。这使得一个小20 pxx20px红色方框。下面是代码：
<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 (box)一起递增。如: box1(1)、box2(2)、box3(3)等.
对这件事有什么建议或帮助吗？
我们非常感谢你的帮助！
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-05-15 10:08:19
试试这个演示。
<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/
Stack Overflow用户
发布于 2014-05-15 10:05:13
保持对元素的引用。附上你想要的文字。
counter++;
var box = document.createElement('div'); // Use a real HTML element
box.appendChild(
document.createTextNode(counter)
);
document.body.appendChild(box);Stack Overflow用户
发布于 2014-05-15 10:12:12
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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23675029
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号