Question

我知道这可能是完全错误的方法，但这是我的代码：

<script>
function dodat(){
var btn=document.createElement("div");
btn.style.width="25px";
btn.style.height="25px";
btn.style.backgroundColor="red";
btn.style.boxShadow="inset 0px 0px 0px 2px black";
btn.style.position="absolute";
btn.style.left="0px";
math = Math.random();
btn.id=math;
num = 0;
setInterval('var num = num+1;document.getElementById(math).style.left=num;', '10');

document.getElementById("track").appendChild(btn);
}
</script>

<body>

<div style="background-color:#c3c3c3;width:500px;height:25px;overflow:hidden;position:relative;" id="track"></div>
</body>

<script>
setInterval("dodat();", "2000");
</script>

我想要一个连续的红色斑点向前移动，但不是，它们会在创建一个新斑点时停止。

感谢您的帮助。

Answer 1

setInterval循环没有停止，它将新定义的框放在上一个框的顶部，因为你已经为它们提供了所有相同的left值。（num每次重置为0时间）

DEMO

只需设置一个计数器（并在添加新框时将其递增）修改left值即可解决此问题。

编辑：理想情况下，您不应该使用position，只需浮动div即可。

DEMO2

function dodat(){
var btn=document.createElement("div");
btn.style.width="25px";
btn.style.height="25px";
btn.style.backgroundColor="red";
btn.style.boxShadow="inset 0px 0px 0px 2px black";
btn.style.float="left";
document.getElementById("track").appendChild(btn);
}

setInterval循环停止的问题

1 个答案: