【问题标题】:Cookie based countdown timer doesn't work基于 Cookie 的倒数计时器不起作用
【发布时间】:2014-01-22 04:49:09
【问题描述】:

编辑:多亏了答案,一些问题得到了解决,但它仍然无法正常工作。它现在在第一页加载时显示正确的倒计时,但是一旦设置了 cookie 并重新加载页面,它就会显示错误的时间,每次重新加载时也会重新启动。我已经相应地更新了下面的代码。

我几天来一直在寻找解决方案,但没有任何工作符合我的需要。我的目标很简单——我需要一个可以倒计时 3 天然后重复的计时器。事实上,对于每个人(服务器定义的时间)或本地(取决于用户第一次访问的时间),它可以是相同的。我需要它在页面重新加载或一天结束时不刷新。

所以我得出结论,我需要 cookie:当您第一次进入页面时,计时器开始倒计时,直到从现在起 3 天。如果您离开网站并在 2 天内进入,则剩余 1 天。如果您在一周后离开并再次来,则计时器将重新开始计算 3 天。

对于倒计时,我使用plugin by Keith Wood。对于 cookie,我使用 plugin by Klaus Hartl。到目前为止,这是我的代码:

$(document).ready(function(){

    if (!$.cookie('offerTimer')){
        var now = new Date(); 
        timerValue = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 3); 
        cookie = $.cookie('offerTimer', timerValue, { expires: 7, path: '/' });
    }else {
        cookie = $.cookie('offerTimer');
    }

    $('#until3d').countdown({until: cookie, format: 'HMS'});
    console.log('cookie is ' + cookie);
});

在第一个页面加载时(未设置 cookie 时)cookie 返回:

offerTimer=Tue%20Jan%2007%202014%2000%3A00%3A00%20GMT%2B0800%20(%D0%9A%D1%80%D0%B0%D1%81%D0%BD%D0%BE%D1%8F%D1%80%D1%81%D0%BA%D0%BE%D0%B5%20%D0%B2%D1%80%D0%B5%D0%BC%D1%8F%20(%D0%B7%D0%B8%D0%BC%D0%B0)); expires=Thu, 30 Jan 2014 09:09:37 GMT; path=/

在第二次及以下访问时 cookie 返回:

Tue Jan 07 2014 00:00:00 GMT+0800 (Красноярское время (зима)) 

那里有西里尔符号,因为我来自俄罗斯。我几乎可以肯定,我可能需要的只是让 cookie 以相应的格式返回日期,以便倒计时功能正常工作。但我不明白它如何在第一个输出中显示正确的时间......我也尝试将日期的格式设置为倒计时插件的格式(因为我使用了其他插件),结果要么是相同或根本不起作用。

PS:我知道绕过这样的计时器很容易,但在这种情况下它不被视为问题。

编辑:稍微更改了代码,感谢 user2310289。

【问题讨论】:

    标签: jquery cookies timer jquery-cookie jquery-countdown


    【解决方案1】:

    我终于设法让它工作了。解决方法很简单。

    我使用插件来简化它(当然还有 jQuery):

    <script type="text/javascript" src="jquery.countdown.js"></script>
    <script type="text/javascript" src="jquery.cookie.js"></script>
    <script type="text/javascript" src="date.format.js"></script>
    

    这是我的代码:

    $(document).ready(function(){
    
        if (!$.cookie('offerTimer')){
            var now = new Date(); 
            timer = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 3);
            $.cookie('offerTimer', timer.format("yyyy, mm, dd"), { expires: 7, path: '/' });
        }
    
        var cookie = $.cookie('offerTimer');
    
        $('#until3d').countdown({until: new Date(cookie), format: 'HMS'});
    });
    

    我希望这对将来的某些人有所帮助,因为我花了很长时间才弄清楚并且我没有找到这个确切的倒计时任务的解决方案。感谢您指出我的一些错误的答案!

    【讨论】:

      【解决方案2】:

      声明

      if (cookie === "undefined")

      是个问题。您无法将 javascript undefined 与字符串 "undefined" 进行比较。这就是您的代码没有进入if 条件的原因。

      要么做

      if (!cookie)

      if (('' + cookie) === "undefined")

      【讨论】:

      • 谢谢,现在如果声明有效!现在我注意到只有在我在 if 语句中指定它之后才会返回 cookie 值,如下所示:cookie = $.cookie('offerTimer', timerValue, { expires: 7, path: '/' });... 我声明 var cookie = $.cookie('offerTimer'); globaly?
      【解决方案3】:

      首先now 没有定义

      var threeDays = new Date();
      now.getFullYear(), now.getMonth(), now.getDay() + 3
      

      也许像在

      中那样使用 threeDays 变量
      threeDays.getFullYear(), threeDays.getMonth(), threeDays.getDay() + 3
      

      我也觉得你想做

      var timerValue = new Date(now.getFullYear(), now.getMonth(), now.getDay() + 3);
      

      最后(也许)未定义的关键字不需要引号。

      【讨论】:

      • 没错,我一直在到处替换部分代码,但没有注意到,谢谢!我将更改顶部帖子中的代码。但是还是不行。
      • 还有什么类型的变量是timerValue。我也更新了我的答案
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多