使用Javascript創建倒計時

Question

我在搜索中找到了這個來創建JavaScript倒計時，但它似乎不適用於我。我很驚訝，因爲似乎沒有其他人報告有問題。我必須錯過一些根本性的東西，我不知道還有什麼可以轉身，但在這裏。

https://gist.github.com/nithinbekal/299417

下面是代碼住的jsfiddle似乎它並不工作對我來說，無論是。

http://jsfiddle.net/96TWk/

function updateWCTime() { 
    now  = new Date(); 
    kickoff = Date.parse("April 27, 2013 09:00:00"); 
    diff = kickoff - now; 

    days = Math.floor(diff/(1000*60*60*24)); 
    hours = Math.floor(diff/(1000*60*60)); 
    mins = Math.floor(diff/(1000*60)); 
    secs = Math.floor(diff/1000); 

    dd = days; 
    hh = hours - days * 24; 
    mm = mins - hours * 60; 
    ss = secs - mins * 60; 

     document.getElementById("countdown") 
      .innerHTML = 
       dd + ' days ' + 
       hh + ' hours ' + 
       mm + ' minutes ' + 
       ss + ' seconds'; 
} 
setInterval('updateWCTime()', 1000); 

Answer 1

變化的時間間隔（現場小提琴：http://jsfiddle.net/96TWk/1/）

setInterval(updateWCTime, 1000); 

控制檯說，功能updateWCTime沒有找到，我不excactly知道爲什麼。 Cu's似乎沒問題。

Answer 2

您可以通過修復你的jsfiddle更改爲：

setInterval(updateWCTime, 1000); 

或通過改變從onload中的jsfiddle左側面板上的設置任一no wrap選項。以下是僅將jsFiddle左側面板設置更改爲「無換行」的演示：http://jsfiddle.net/jfriend00/rdj96/

下面是爲什麼它不起作用的解釋。當你傳遞一個字符串setInterval()這樣的：

setInterval('updateWCTime()', 1000); 

JavaScript的intepreter使用eval()評估字符串，該函數必須在全球範圍內被發現。但是，因爲您在jsFiddle的左側面板中有onload，所以您的所有javascript都在另一個函數內（例如不是全局的），所以eval()找不到該函數。

改變你的代碼

setInterval(updateWCTime, 1000); 

允許JavaScript只是使用普通的函數引用，然後可以找到功能在本地範圍內（不必須是全球性的）。

僅供參考，你應該幾乎不會傳遞一個字符串到setInterval()。

Answer 3

我會提出一種完全不同的倒數計時器的方法;帶回調的發電機。起初你可能會想，爲什麼我會這樣做？但是使用生成器可以爲重複使用的東西節省大量代碼。我也使用window.setTimeout這是爲了確保您的回調花費的時間比您的間隔時間更長，確保您不會發生令人討厭的事情。

通過代碼的評論應該有助於你理解發生了什麼。

// createCountDown(Date end_time [, Function callback, Integer ms_interval]) 
// returns an Object properties: ms, ss, mm, hh, dd, MM, yy, timer (current) 
// same Object is passed as parameter 1 to callback 
function createCountDown(time, callback, ms) { 
    var future = time.valueOf(), // cache these to save re-calling them later 
     f_ms = time.getUTCMilliseconds(), 
     f_ss = time.getUTCSeconds(), 
     f_mm = time.getUTCMinutes(), 
     f_hh = time.getUTCHours(), 
     f_dd = time.getUTCDate(), 
     f_MM = time.getUTCMonth(), 
     f_yy = time.getUTCFullYear(), 
     o = {timer: null}; // an object to make life easier 
    var f = function() { // the function that will handle the setTimeout loops 
     var d = new Date(), // the current time of each loop 
      remain = future - d.valueOf(); // difference (in ms) 
     if (remain > 0) { 
      // Totals 
      o['total_ms'] = remain; // if you'll never need all these, you can 
      o['total_ss'] = remain/ 1000 | 0; // comment or cut them out 
      o['total_mm'] = remain/ 60000 | 0; 
      o['total_hh'] = remain/3600000 | 0; 
      o['total_dd'] = remain/86400000 | 0; 
      // Differences (via UTC) 
      o['ms'] = (1000 + f_ms - d.getUTCMilliseconds()) % 1000; // same 
      o['ss'] = ( 60 + f_ss - d.getUTCSeconds() ) % 60; 
      o['mm'] = ( 60 + f_ss - d.getUTCMinutes() ) % 60; 
      o['hh'] = ( 24 + f_hh - d.getUTCHours()  ) % 24; 
      o['dd'] = (  f_dd - d.getUTCDate()  )  ; // below 
      o['MM'] = ( 12 + f_MM - d.getUTCMonth()  ) % 12; 
      o['yy'] = (  f_yy - d.getUTCFullYear() )  ; 
      if (o['dd'] < 0) { // fix for negative days 
       d.setUTCMonth(d.getUTCMonth() + 1); 
       d.setUTCDate(0); // using number of days in current month 
       o['dd'] + d.getUTCDate(); 
      } 
      callback(o); // invoke your callback 
      o.timer = window.setTimeout(f, ms); // set up next loop 
     } 
    } 
    ms || ms === 0 || (ms = 200); // default ms if not set 
    callback || (callback = function() {}); // default empty fn 
    f(); // start off the whole looping 
    return o; 
} 

現在寫您的callback，這是要短得多，因爲你已經有了長遠的東西的方式進行。 console.log使說明性的目的很容易。

function updateWCTime(o) { 
    console.log(
     o['total_dd'] + ' days ' + 
     o['hh'] + ' hours ' + 
     o['mm'] + ' minutes ' + 
     o['ss'] + ' seconds' 
    ); 
} 

最後，啓動它。

createCountDown(new Date("April 27, 2013 09:00:00"), updateWCTime);