2010-06-02 82 views
1

讓我解釋一下我想要做的事情。ajax/JS定時倒計時?

我想製作一個簡單的盒子,以指定的間隔倒數。

例如,我想將它設置爲從150開始,然後我想將它設置爲每30秒下降15。

這可能與AJAX/Javascript?如果是這樣,有人能指出我正確的方向嗎?

真的很感謝這個腳本的任何幫助,谷歌已經幾個小時了! :(

乾杯

基蘭

+0

只是一個方面說明,這是無關的AJAX(你只是倒計時,不向服務器發出請求)。 – GlenCrawford 2010-06-02 09:42:00

回答

1

看一看在setTimeoutsetInterval方法,它們允許你指定的毫秒數(1000毫秒=1秒)後執行的功能。請使用,調用是持續下降的數量,並將其寫入到一個HTML元素給用戶的功能可以看到它。

1

這不是測試,但我希望它表明你要走的路。

var start = 150; 
var drop = 15; 
var interval = 30; 

function countdown(){ 
    document.getElementById('mybox').innerHTML = start; 
    start-=drop; 
    window.setTimeout("countdown",interval*1000); 
} 

countdown(); 
+0

謝謝你,我會嘗試做這個工作!我們需要的是一個簡單的解決方案。 – kieran 2010-06-02 10:47:27

+0

你只需要在某個地方停下來,並且你應該使用setInterval來避免偏離。 – Alsciende 2010-06-02 14:39:50

0

您可以使用jQuery來做到這一點,看到http://keith-wood.name/countdown.html - >標籤回調

+0

如果在項目中尚未使用JQuery,那麼簡單的倒計時會帶來很多開銷。 – 2010-06-02 09:41:26

+0

你是絕對正確的,這就是爲什麼我寫「你可以使用」;-) 這個解決方案的優點和缺點是特殊的文章... – 2010-06-02 10:17:35

0

請記住,在我的瀏覽器30秒不一定等於在你的瀏覽器30秒。這取決於瀏覽器的工作量。 時間短暫較短,但可以長時間增加。時代將分開。如果兩個訪問者之間的時間不能相等(或幾乎相等),那麼這種簡單的解決方案應該沒問題。

我們曾經有一個問題在我們的一個項目中引入實時鐘/倒計時。我們用javascript,ajax和PHP構建一個腳本用於時鐘同步(服務器時間是timeserver)。

0

您應該使用的setInterval/clearInterval這是這類任務的提出:

function cooldown(element, start, stop, step, delay) { 
    var current = start; 
    element.innerHTML = current; 
    var timer = setInterval(function() { 
     current -= step; 
     if(current < stop) current=stop; 
     element.innerHTML = current; 
     if(current == stop) clearInterval(timer); 
    }, delay*1000); 
} 

這裏演示:http://jsfiddle.net/PCMHn/