如何在倒計時器完成時自動復位？

Question

我有這個倒計時腳本：

<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> 

function calcage(secs, num1, num2) { 
    s = ((Math.floor(secs/num1))%num2).toString(); 
    if (LeadingZero && s.length < 2) 
    s = "0" + s; 
    return "<b>" + s + "</b>"; 
} 

function CountBack(secs) { 
    if (secs < 0) { 
    document.getElementById("cntdwn").innerHTML = FinishMessage; 
    return; 
    } 
    DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000)); 
    DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24)); 
    DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60)); 
    DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60)); 

    document.getElementById("cntdwn").innerHTML = DisplayStr; 
    if (CountActive) 
    setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod); 
} 

function putspan(backcolor, forecolor) { 
document.write("<span id='cntdwn' style='background-color:" + backcolor + 
       "; color:" + forecolor + "'></span>"); 
} 

if (typeof(BackColor)=="undefined") 
    BackColor = "white"; 
if (typeof(ForeColor)=="undefined") 
    ForeColor= "black"; 
if (typeof(TargetDate)=="undefined") 
    TargetDate = "12/27/2012 1:36 PM"; 
if (typeof(DisplayFormat)=="undefined") 
    DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; 
if (typeof(CountActive)=="undefined") 
    CountActive = true; 
if (typeof(FinishMessage)=="undefined") 
    FinishMessage = ""; 
if (typeof(CountStepper)!="number") 
    CountStepper = -1; 
if (typeof(LeadingZero)=="undefined") 
    LeadingZero = true; 


CountStepper = Math.ceil(CountStepper); 
if (CountStepper == 0) 
    CountActive = false; 
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990; 
putspan(BackColor, ForeColor); 
var dthen = new Date(TargetDate); 
var dnow = new Date(); 
if(CountStepper>0) 
    ddiff = new Date(dnow-dthen); 
else 
    ddiff = new Date(dthen-dnow); 
gsecs = Math.floor(ddiff.valueOf()/1000); 
CountBack(gsecs); 

我想使它所以一旦定時器達到0，它增加了2天，原來的日期和復原。

這裏是我想出了：

CountStepper = Math.ceil(CountStepper); 
if (CountStepper == 0) 
    CountActive = true; 
var SetTimeOutPeriod = (Math.abs(targetdate)-1)*2000 + 990; 
putspan(BackColor, ForeColor); 
var dthen = new Date(TargetDate); 
var dnow = new Date(); 
if(CountStepper>0) 
CountBack(gsecs); 

但它似乎並不奏效。有關如何解決此問題的任何幫助或提示？

Answer 1

有兩種方法做重複的Javascript基於時間的事件。第一種方法，你正在努力嘗試，是做一個暫停，然後從第一個超時的回調中調用另一個超時（然後是超時調用其回調另一個超時，等等等等）。

這一基本做法完全工作（和我想象，如果你做一些調試，你可以得到它爲你工作的），但也有另一種方法：setInterval的。

的setInterval一遍又一遍運行相同的代碼，每超時時間。如果你做了這樣的事情：

window.setInterval((putspan, Math.abs(targetdate)-1)*2000 + 990) 

它也應該可以解決你的問題。

作爲一個側面說明，使用EVAL-ED代碼（在字符串中的javascript），是有很多原因一個可怕的想法。我推薦使用函數（就像我在我的例子中用putspan做的那樣）。您可以使用jQuery的代理或下劃線的綁定來「修復」爭論的地方，像這樣：

var putspanWithColor = $.proxy(putspan, this, BackColor, ForeColor); 
window.setInterval(putspanWithColor, Math.abs(targetdate)-1)*2000 + 990)