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

您只需使用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 2

您每次都需要追加儿童，而不仅仅是重写相同元素的内容。

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

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

显示具有时间间隔的循环数据

3 个答案: