使用javascript在網頁上的相同位置更新編號

有沒有辦法讓JavaScript在頁面的相同位置連續打印一個計數器？使用javascript在網頁上的相同位置更新編號

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

我要數X更新和替換以前的號碼，但是這個代碼，似乎要等到環呈現出號之前完成（當時已經太晚了）

是否有方式來說，打印號碼x，現在等待100ms，現在清除並在同一空間更新x的新值，並重復？我知道innerHTML正在殺死整個頁面，因爲現在所有這些頁面需要做的是運行一個計數器，所以其他元素是不相關的。我不想要的是打印的所有這些數字的列表，我需要延遲）

謝謝！

來源

2012-08-09 Joseph

瀏覽器不會更新顯示。要使計時器發生，您需要使用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/

注意的是，以上僅更新「計數器」 div的內容，所以任何您網頁上的其他元素不會受到影響。

爲您做的家庭作業：谷歌所有您在該代碼中無法理解的內容。

來源

2012-08-09 03:42:54 nnnnnn

+1作業作業！ – elclanrs 2012-08-09 03:55:34

感謝您的家庭作業！那個演示很甜蜜。 :) – Joseph 2012-08-09 04:03:50

不客氣。我分配了作業，因爲（a）這是一個警察，避免詳細解釋所有事情，但也因爲（b）我得到了你真正想學習的印象，並因此從自己找到東西中受益。小竅門：當你在搜索時添加「mdn」，例如「settimeout mdn」 - 第一個結果通常是[Mozilla Developer Network]中的一個頁面（https://developer.mozilla.org/en-US/docs/JavaScript），一個非常好的JS資源。 – nnnnnn 2012-08-09 04:12:01

是的！爲了這個目的，我會建議你兩件事情：

要爲目的使用的容器（可以說一個div）：

，並把它稱爲document.getElementById('counter').innerHTML = x
要使用javascript timers更新之前。而JavaScript的運行

希望幫助，

來源

2012-08-09 03:41:01

嗨拉蒙，我該如何填充該div？因爲JavaScript在其填充之前運行（即使我放入了一些段落），並返回一個錯誤，即它的Null（如果我在Chromes控制檯中運行它，但在頁面運行後不運行） – Joseph 2012-08-09 04:00:54

嗨@Joseph，另一個故事。你會發現很多情況下，你想在頁面加載完成後執行javascript代碼。這就是爲什麼我會建議你看看有史以來最好的JavaScript庫之一：jQuery。除了這個功能之外，它還可以幫助您避免跨瀏覽器兼容性問題，並且可以讓您遠離重新發明輪子（因爲有很多有用的jQuery插件 - 即jQueryUI）。 – 2012-08-09 05:30:14

......然而，這代碼似乎要等到環呈現出號碼前完成...

不要使用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++

來源

2012-08-09 03:45:04 elclanrs

使用javascript在網頁上的相同位置更新編號

回答

相關問題