使用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);