【问题标题】:Jquery: countdown should not be reset when it goes to next pageJquery:进入下一页时不应重置倒计时
【发布时间】:2015-05-20 09:34:39
【问题描述】:

让我们假设,在主页中,倒计时可能从 2 分 59 秒开始,1 分钟后我从主页移动到下一页,这里倒计时应该显示 1 分 59 秒,对吗?但在我的情况下再次进入 2 分 59 秒。

我一直在使用以下库进行倒计时

http://jchavannes.com/jquery-timer/demo

http://hilios.github.io/jQuery.countdown/

请注意:我没有通过 AJAX 加载页面。

请告诉我您对如何在所有页面上显示正确更新倒计时的看法。

使用 cookie 的问题:

问题是我们永远不会得到当前的更新值。因为例如,当前倒计时 1 分 5 秒,我将此信息存储在 cookie 中,然后我立即移至下一页,可能是其他原因,页面在 55 秒后加载。 事实上,当前的 cookie 倒计时值是 1 分 5 秒,但我们必须显示倒计时值 10 秒,对吗?

【问题讨论】:

  • 使用localStoragecookie存储计数器
  • 使用cookie来存储计数器的启动时间,在页面加载时,从启动时间开始初始化一个计数器。
  • 是的,但问题是我们永远不会得到当前的更新值。因为例如,当前倒计时 1 分 5 秒,我将此信息存储在 cookie 中,然后我立即移至下一页,可能是其他原因,页面在 55 秒后加载。事实是,当前的 cookie 倒计时值是 1 分 5 秒,但我们必须显示倒计时值 10 秒,对吗?

标签: javascript jquery timer


【解决方案1】:

您可以通过 localStorage 保存您的变量,并在进入下一页后获取它:-

示例

var count =0;
if(localStorage.getItem("count"))
    count = localStorage.getItem("count");
var timer = $.timer(function() {
    $('#counter').html(++count);
    localStorage.setItem("count", count);

});
timer.set({ time : 1000, autostart : true });    

【讨论】:

  • 是的,但问题是我们永远不会得到当前的更新值。因为例如,当前倒计时 1 分 5 秒,我将此信息存储在 cookie 中,然后我立即移至下一页,可能是其他一些原因,页面在 55 秒后加载。事实是,当前的 cookie 倒计时值是 1 分 5 秒,但我们必须显示倒计时值 10 秒,对吗?
  • 每次定时器改变时设置值
  • 页面在内部加载时如何设置值?
  • 我已经编辑了我的答案检查它
  • 加分秒倒计时的语法是什么?
【解决方案2】:

将您的计时器值设置为本地存储

<script>
    localStorage.setItem("current_time", timer_value);
</script>

在下一页获取计时器值

<script>
    var timer = localStorage.getItem("current_time");
    //alert(timer);
</script>

【讨论】:

  • cookie 和 localStorage,两者都用于不同的目的。只需尝试将您的计时器存储到本地存储。
【解决方案3】:

只需将“结束时间”保存在 cookie/localstorage 中,每次都使用该值来计算计时器,即:从现在起 30 秒,如果现在是 12:00:00,则仅将结束时间保存为 12 :00:30 在 cookie/localstorage 中,每次你需要计算你的计时器时减去当前时间到你最初保存的结束时间。

【讨论】:

  • 我相信,这不应该是正确的方式。因为如果 5 分钟后加载下一页怎么办?
  • 减法会给你一个负数,你就会知道定时器已经过期了。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-10-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多