Question

有没有办法让JavaScript在页面上的同一位置连续打印计数器？

for(var x=0; x<3000; x++){
    document.write(x + '</br>');
    document.body.innerHTML = "";
}

我希望数字x更新并替换之前的数字，但是这段代码似乎要等到循环结束才能显示一个数字（到那时已经太晚了）

有没有办法说，打印数x，现在等待100ms，现在清除并在同一空间更新x的新值，并重复？

（我知道innerHTML正在杀死整个页面，因为现在所有这些页面需要做的是运行一个计数器，所以其他元素是无关紧要的。我不想要的是打印列表所有这些数字，我需要延迟）

谢谢！

Answer 1

在JavaScript运行时，浏览器不会更新显示。要使计时器发生，您需要使用setTimeout()或setInterval()。另外，请避免使用document.write()，除非您有充分的理由使用它（如果您不确定是什么原因，那么根本不要使用它。）

你想要这样的东西：

<body>
   <div id="counter"></div>
</body>

然后：

window.onload = function() {
    var x = 0,
        max = 3000,
        ctr = document.getElementById("counter");

    function incrementCounter() {
       ctr.innerHTML = x;
       if (x++ < max)
           setTimeout(incrementCounter, 100);
    }

    incrementCounter();
}

演示：http://jsfiddle.net/nnnnnn/v5hmE/

请注意，上述内容仅更新“counter”div的内容，因此页面上的任何其他元素都不会受到影响。

为您完成家庭作业：Google在该代码中您不理解的所有内容。

Answer 2

是的！为此，我建议你做两件事：

为此目的使用容器（比如说div）：

并将其称为document.getElementById('counter').innerHTML = x
在更新前使用javascript timers。

希望有所帮助，

Answer 3

...但是这段代码似乎要等到循环结束才显示数字...

请勿使用for循环。你需要一个特定的间隔。使用具有setTimeout和一些递归的函数：

var x = 0;
var speed = 100;
function update() {
  if (x <= 3000) {
    setTimeout(function() {
      // update DOM here
      x++; 
      update();
    }, speed);
  } else {
    return false;
  }
}

演示： http://jsfiddle.net/elclanrs/PRC9R/

您可以将间隔更改为9，以使其看起来更可信但速度更快。

x += 9; // instead of x++

使用javascript在网页上的同一位置更新号码

3 个答案: