以时间间隔显示for循环数据

Question

我想显示 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;
    }

Answer 1

每次都需要appendChild，而不是只重写同一个元素的内容。

for(var i = 1; i <= 100; i++){
  var p = document.getElementById('freeRange');
  var d = document.createElement('DIV')
  d.innerText = i;
  p.appendChild(d)
}

Answer 2

您可以简单地使用 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>

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

以时间间隔显示for循环数据

Display for loop data with time interval

javascript

loops

innerhtml