以时间间隔显示循环数据
Posted
技术标签:
【中文标题】以时间间隔显示循环数据【英文标题】：Display for loop data with time interval 【发布时间】：2018-08-30 11:31:49 【问题描述】：我想显示从 1 到 100 的数字，但在显示数字时会有某种延迟。目前它只显示 for 循环中的最后一个数字，有没有一种不太高级的方法来做到这一点。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="random.css">
<title></title>
</head>
<body>
<div id="freeRange">1</div>
<script type="text/javascript" src="random.js"></script>
</body>
</html>
这里是 Javascript 代码
for(var i = 1; i <= 100; i++)
document.getElementById('freeRange').innerHTML = i;
【问题讨论】：
【参考方案1】：您可以简单地使用setInterval() 来实现：
在这里，您可以跟踪显示的数字，并每秒递增该数字。
let div = document.getElementById('freeRange');
let count = 1; //Keep track of your displayed number
let interval = setInterval(() =>
div.innerHTML = count; //Replaces your displayed number
count++; //Increment your variable
if(count > 100) clearInterval(interval); //Stop the interval when you reach 100
,1000); //TIme to wait between every change, in millis<div id="freeRange">0</div>【讨论】：
这很有帮助，我现在会更多地使用 setInterval()。【参考方案2】：你每次都需要 appendChild，而不仅仅是重写同一个元素的内容。
for(var i = 1; i <= 100; i++)
var p = document.getElementById('freeRange');
var d = document.createElement('DIV')
d.innerText = i;
p.appendChild(d)
【讨论】：
这每次都会打印一个新数字，我想一个接一个地显示。【参考方案3】： <div id="freeRange">1</div>
var myVar = setInterval(myTimer, 1000);
function myTimer()
var d = parseInt(document.getElementById("freeRange").innerHTML);
document.getElementById("freeRange").innerHTML = d+1;
【讨论】：
demo #id 指的是什么？ 虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。 更改后效果很好。我认为这适用于 clearInterval()。谢谢，很有帮助。以上是关于以时间间隔显示循环数据的主要内容，如果未能解决你的问题，请参考以下文章