代码之家 › 专栏 › 技术社区 › Marlon

使用Javascript创建倒计时

countdown html javascript

Marlon · 技术社区 · 13 年前

我在搜索中发现了这个来创建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 );

3 回复 | 直到 13 年前

Niels 13 年前

将音程更改为(现场小提琴: http://jsfiddle.net/96TWk/1/ )

setInterval(updateWCTime, 1000 );

控制台显示功能 updateWCTime 没有找到,我不知道为什么。Cu's看起来不错。

jfriend00 13 年前

您可以将jsFiddle更改为:

setInterval(updateWCTime, 1000 );

或者通过更改jsFiddle左侧面板上的设置 onload 到 no wrap 选项。下面是一个关于只将jsFiddle左面板设置更改为“无换行”的演示: http://jsfiddle.net/jfriend00/rdj96/

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

setInterval('updateWCTime()', 1000 );

javascript intelpreter使用 eval() 要计算字符串,必须在全局范围内找到函数。但是,因为你 有负载的 在jsFiddle的左侧面板中,所有的javascript都在另一个函数中(例如,不是全局的),所以 评估() 找不到该函数。

将代码更改为

setInterval(updateWCTime, 1000 );

允许javascript只使用一个普通的函数引用,然后它就可以在本地范围内找到函数(不必是全局的)。

仅供参考,你几乎不应该把字符串传递给 设置间隔() .

Paul S. 13 年前

我将提出一种完全不同的倒计时方式;带有回调的生成器。一开始你可能会想,我为什么要这样做?但是使用生成器可以在重复使用的东西中节省大量代码。我也用过 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);