Question

我在搜索中发现这是为了创建一个JavaScript倒计时，但它似乎对我不起作用。我很惊讶，因为似乎没有人报告有问题。我必须遗漏一些基本的东西，我不知道还有什么转向，但在这里。

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

以下是JSFiddle上的代码，它似乎也不适合我。

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

将间隔更改为（live fiddle：http://jsfiddle.net/96TWk/1/）

setInterval(updateWCTime, 1000 );

控制台说找不到函数updateWCTime，我也不知道为什么。 Cu似乎没问题。

Answer 2

您可以通过更改为：

来修复您的jsFiddle

setInterval(updateWCTime, 1000 );

或将jsFiddle左侧面板上的设置从onload更改为no wrap选项中的任意一个。以下是仅将jsFiddle左面板设置更改为“No wrap-in”的演示：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);

使用Javascript创建倒计时

3 个答案: