1

我在搜索创建 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 );
4

3 回答 3

2

将间隔更改为（现场小提琴：http: //jsfiddle.net/96TWk/1/）

setInterval(updateWCTime, 1000 );

控制台说updateWCTime找不到该功能，我不知道究竟是为什么。铜好像还可以。

于 2013-04-21T12:52:16.967 回答
1

您可以通过更改为来修复您的 jsFiddle：

setInterval(updateWCTime, 1000 );

或通过将 jsFiddle 左侧面板上的设置从onload更改为任一no wrap选项。这是一个仅将 jsFiddle 左侧面板设置更改为“No wrap - in”的演示：http: //jsfiddle.net/jfriend00/rdj96/

这是为什么它不起作用的解释。当您将字符串传递给setInterval()这样的：

setInterval('updateWCTime()', 1000 );

javascript 解释器eval()用于评估字符串，并且该函数必须在全局范围内找到。但是，因为您onload在 jsFiddle 的左侧面板中，所以您的所有 javascript 都在另一个函数中（例如，不是全局的），因此eval()无法找到该函数。

将您的代码更改为

setInterval(updateWCTime, 1000 );

允许 javascript 仅使用普通函数引用，然后它可以在您的本地范围内找到该函数（不必是全局的）。

仅供参考，您几乎不应该将字符串传递给setInterval().

于 2013-04-21T13:06:33.220 回答
0

我将提出一种完全不同的倒计时方法；带有回调的生成器。一开始你可能会想，我为什么要这样做？但是使用生成器可以为您节省大量重复使用的代码。我还使用window.setTimeout了 This 来确保如果您的回调执行时间比您的时间间隔长，您不会发生令人讨厌的事情。

代码中的注释应该可以帮助您了解正在发生的事情。

// 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);
于 2013-04-21T14:03:41.307 回答