Question

我正在寻找jquery插件倒计时，但如果页面刷新仍然保持conter。我正在申请问卷，我想要倒数计时器直到60分钟。我的申请现在如果用户登录开始回答问题，他逐一回答问题，问题是每页一个问题。因此，如果下一个问题页面将刷新。所以现在如果用户想要回答下一个问题倒数计时器将重置为默认值。现在我正在使用jquery插件http://keith-wood.name/countdown.html

使用代码：

   $(function () {
        var d = new Date();
        d = new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes()+59, 59);
        $('#defaultCountdown').countdown({until: d, format: 'MS'});
    });

所以我的问题是，如果页面刷新了whitout reset timer到默认值，那么是否有插件倒数计时器。

感谢。

Answer 1

您可以通过在Cookie中保存截止日期来完成此操作，并在每个请求中从该Cookie中获取值。你的代码会有点复杂，但它会完成这项工作。您需要jQuery Cookie plugin，而您可能需要read up on how to use it。

This is what I come up with。您可以更改withCookie的值，以查看保存和不保存请求之间的截止日期之间的区别（单击“运行”而不是重新加载 - 实际上，它会执行相同的操作）。由于我找不到托管你正在使用的倒计时插件的CDN，我只是打印截止日期 - 但由于你想要的是确保截止日期保持不变，你现在唯一需要做的就是生成jsFiddle中的截止日期变量d（秒除外），然后调用

$('#defaultCountdown').countdown({until: d, format: 'MS'});

Answer 2

您可以将初始日期存储在localStorage中，并尝试在刷新页面后从那里恢复它。问题解答后，您可以从localStorage

中删除日期

$(function () {
  var d = localStorage.getItem('date');
  if(!d) {
    d = (new Date()).getTime() + 3599000;
    localStorage.setItem('date', d);
  } else {
    d = parseInt(d);
  }
  $('#defaultCountdown').countdown({until: new Date(d), format: 'MS'});
});

function goNext() {
  localStorage.removeItem('date');
  // Go to next question
  ...
}

工作示例：http://jsbin.com/oxovih/2/edit

Jquery倒计时但如果页面刷新/ F5仍然保持计时器

2 个答案: