2

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

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

我希望数字 x 更新并替换以前的数字，但是此代码似乎要等到循环完成才能显示数字（到那时为时已晚）

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

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

谢谢！

4

3 回答 3

4

JavaScript 运行时浏览器不会更新显示。要使计时器发生，您需要使用setTimeout()or 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/

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

给你的家庭作业：谷歌所有你在那个代码中不理解的东西。

于 2012-08-09T03:42:54.267 回答
1

是的！为此，我向您推荐两件事：

  1. 为此目的使用容器（假设是 div）：

    并将其称为document.getElementById('counter').innerHTML = x

  2. 在更新之前使用javascript 计时器。

希望有帮助，

于 2012-08-09T03:41:01.830 回答
1

...但是此代码似乎要等到循环完成后才显示数字...

不要for为此使用循环。你需要一个特定的时间间隔，就像你说的那样。使用带有 asetTimeout和一些递归的函数：

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++
于 2012-08-09T03:45:04.503 回答