如何创建一个javascript倒计时,刷新继续计数

时间:2011-12-11 06:41:17

标签: javascript jquery-plugins timeout countdown

我用javascript和jquery尝试但不知道如何做到这一点。我不会再让计时器重新开始计数。当他倒数3,2时,它与拍卖相同,并且在刷新时他不再重新开始它应该继续倒计时。而在其他产品上,它必须再次从3开始计算。有任何想法吗?

编辑,因为有些用户误解了我要搜索的内容。

我的问题是我不知道如何节省有人刷新页面的时间以继续将其计算在内。如果有人在21秒刷新网站,他或她有30秒可以做出选择。刷新网站后,计数器将在21秒内计数,并且不会再次以30秒再次启动。 没有ajax。

可能硬编码。 如果不可能那么cookie变种。

2 个答案:

答案 0 :(得分:3)

您可以在加载页面时为窗口设置名称。在设置名称之前,请检查此窗口是否已有名称。

如果它没有名称,请为窗口设置一个名称,并从0开始计数,并在每次递增时将计数值保存在cookie中。

如果它有一个名称(这意味着重新加载页面),请从cookie中读取计数值并执行增量并保存到cookie。

编辑:示例,在body load上调用initCount()函数。使用decrementAndSave函数递减计数值并将其保存到cookie。

var count = 3;// 3 -> 2 -> 1

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function initCount() {
    if (window.name) {
        count = getCookie("count_" + window.name);// to keep separate count cookies for each window    
    } else {
        window.name = "w_" + (new Date().getTime());
        count = 3;
        setCookie("count_" + window.name, count, null);
    }
}

function decrementAndSave() {
    count--;
    // separate cookie for each window or tab
    setCookie("count_" + window.name, count, null);
}

答案 1 :(得分:0)

如果您有倒计时,那么您必须定义某种结束时间。因此,不要倒计时,只是每秒减1,尝试这样的事情:

var endTime = new Date(2011,11,13,0,0,0); // Midnight of December 13th 2011
var timer = setInterval(function() {
    var now = new Date();
    var timeleft = Math.max(0,Math.floor((endTime.getTime()-now.getTime())/1000));

    var d, h, m, s;
    s = timeleft % 60;
    timeleft = Math.floor(timeleft/60);
    m = timeleft % 60;
    timeleft = Math.floor(timeleft/60);
    h = timeleft % 24;
    timeleft = Math.floor(timeleft/24);
    d = timeleft;

    document.getElementById('counter').innerHTML = "Time left: "+d+" days, "+h+" hours, "+m+" minutes, "+s+" seconds.";

    if( timeleft == 0) clearInterval(timer);
},1000);