Jquery/Javascript定时器，它不'；刷新时不能重新启动

这是我关于SO的第一个问题：）

我需要一个jQuery或javascript中的计时器，它将倒计时15分钟，然后显示关闭按钮。此外，当用户刷新页面时，不应重置页面，但可以在页面停止时继续，也可以完成倒计时，这不取决于用户是否返回，即，如果用户在16分钟后返回，他将看到消息和关闭按钮。有什么建议吗

---

多谢各位

使用卸载方法将时间值保存到浏览器中的数据存储中的多个选项： -饼干 -本地存储等

理想方法-节省在用户会话对象的服务器上启动工作流的时间。

---

每当重新加载页面时，将值/经过的时间显示到UI，并显示适当的消息

使用卸载方法将时间值保存到浏览器中的数据存储中的多个选项： -饼干 -本地存储等

理想方法-节省在用户会话对象的服务器上启动工作流的时间。 每当重新加载页面时，获取UI的值/运行时间并显示适当的消息

尝试此操作，它使用您必须下载并包含在脚本中的内容，并在所有当前浏览器上工作：

/* get the time passed from the cookie, if one is set */
var count = parseInt(($.cookie('mytimeout') || 0), 10);

/* set an interval that adds seconds to the count */
var interval = setInterval(function() {
  count++;
  /* plus, you can do something you want to do every second here, 
     like display the countdown to the user */
}, 1000);

/* set a timeout that expires 900000 Milliseconds (15 Minutes) - 
   the already passed time from now */
var timeout = setTimeout(function() {
  /* put here what you want to do once the timer epires */

  /* clear the Interval */
  clearInterval(interval);
}, 900000 - count*1000);

/* before the window is reloaded or closed, store the current timeout in a cookie. 
   For cookie options visit jquery-cookie */
window.onbeforeunload = function() {
  $.cookie('mytimeout', count, { expires: 7, path: '/' });
};

如果您希望即使用户不在页面上也能让时间流逝，则可以使用

new Date（）.getTime（）

获取从一次访问到下一次访问之间经过的毫秒数。因此，改变这一点：

/* get the last time the user visited the page */
var lastTime = parseInt(($.cookie('timepassed') || new Date().getTime()), 10);

/* add elapsed time to the count. If the count is negative, set it to 0 */
var count = Math.max(parseInt(($.cookie('mytimeout') || 0), 10) + parseInt((new Date().getTime() - lastTime) / 1000, 10), 0);

/* set the time passed on unload */
window.onbeforeunload = function() {
  $.cookie('mytimeout', count, { expires: 7, path: '/' });
  $.cookie('timepassed', new Date().getTime(), { expires: 7, path: '/' });
};

重要提示：这是不安全的，用户可以操纵计数，但如果您想执行安全脚本，js不是合适的工具。

更新

试试这个，它使用您必须下载并包含在脚本中的内容，并在所有当前浏览器上工作：

/* get the time passed from the cookie, if one is set */
var count = parseInt(($.cookie('mytimeout') || 0), 10);

/* set an interval that adds seconds to the count */
var interval = setInterval(function() {
  count++;
  /* plus, you can do something you want to do every second here, 
     like display the countdown to the user */
}, 1000);

/* set a timeout that expires 900000 Milliseconds (15 Minutes) - 
   the already passed time from now */
var timeout = setTimeout(function() {
  /* put here what you want to do once the timer epires */

  /* clear the Interval */
  clearInterval(interval);
}, 900000 - count*1000);

/* before the window is reloaded or closed, store the current timeout in a cookie. 
   For cookie options visit jquery-cookie */
window.onbeforeunload = function() {
  $.cookie('mytimeout', count, { expires: 7, path: '/' });
};

如果您希望即使用户不在页面上也能让时间流逝，则可以使用

new Date（）.getTime（）

获取从一次访问到下一次访问之间经过的毫秒数。因此，改变这一点：

/* get the last time the user visited the page */
var lastTime = parseInt(($.cookie('timepassed') || new Date().getTime()), 10);

/* add elapsed time to the count. If the count is negative, set it to 0 */
var count = Math.max(parseInt(($.cookie('mytimeout') || 0), 10) + parseInt((new Date().getTime() - lastTime) / 1000, 10), 0);

/* set the time passed on unload */
window.onbeforeunload = function() {
  $.cookie('mytimeout', count, { expires: 7, path: '/' });
  $.cookie('timepassed', new Date().getTime(), { expires: 7, path: '/' });
};

重要提示：这是不安全的，用户可以操纵计数，但如果您想执行安全脚本，js不是合适的工具。

更新

---

这里有一个

localStorage

解决方案。但是当你阅读评论时，你可以很容易地操纵计时器

当用户不在页面上时，此计时器不会倒计时。它只记得他离开时柜台的状态。但是你知道基本的想法。您可以使用

Date.getTime（）

这样的场景来改进它：P

var updateTimer = function() {
    timer = localStorage.getItem('timer') || 0;
    if ( timer === 0 ) {
       $("div#timer").html("Timer is unset");
    } else {
       timer--;
       localStorage.setItem('timer', timer);
      $("div#timer").html(timer);
    }
};

$(function() {
    setInterval(updateTimer, 1000);
    $("#start").click( function() {
        localStorage.setItem('timer', 500);
    });
});

---

这里有一个

localStorage

解决方案。但是当你阅读评论时，你可以很容易地操纵计时器

当用户不在页面上时，此计时器不会倒计时。它只记得他离开时柜台的状态。但是你知道基本的想法。您可以使用

Date.getTime（）

这样的场景来改进它：P

var updateTimer = function() {
    timer = localStorage.getItem('timer') || 0;
    if ( timer === 0 ) {
       $("div#timer").html("Timer is unset");
    } else {
       timer--;
       localStorage.setItem('timer', timer);
      $("div#timer").html(timer);
    }
};

$(function() {
    setInterval(updateTimer, 1000);
    $("#start").click( function() {
        localStorage.setItem('timer', 500);
    });
});

---

我想到的任何事情都是使用本地缓存来保留计时器值。为此，您需要

localStorage

支持或cookies和服务器端的东西如果用户在15分钟后无法绕过关闭非常重要，我不会在JS中这样做，用户只需操作cookie或localStorage即可。您仍然需要一个计时器来显示剩余的时间，但检查时间是否已过也应该在服务器端完成。我想到的任何事情都是使用本地缓存来保留计时器值。为此，您需要

localStorage

支持或cookies和服务器端的东西如果用户不能绕过关闭很重要的话15分钟后，我不会在JS中这样做，用户只需操纵cookie或localStorage。您仍然需要一个计时器来显示剩余时间，但检查时间是否已过也应该在服务器端完成。谢谢；）当你不在页面上时，这个计时器几乎不会倒计时，所以基本上这是一个错误的策略：）@Stano，你不必删除你的评论-你可以在这个页面上放置一个答案，我将向上投票：P。我只是想注意，这样写的计时器在用户离开页面时不会激活。因此，如果有人打开计数器，然后关闭页面，当他打开它时，倒数将从上次打开页面时开始继续。您可以通过在

localStorage

中输入计数器应完成的时间并设置间隔来计算每分钟的时间来解决此问题。：）谢谢你；）当你不在页面上时，这个计时器几乎不会倒计时，所以基本上这是一个错误的策略：）@Stano，你不必删除你的评论-你可以在这个页面上放置一个答案，我将向上投票：P。我只是想注意，这样写的计时器在用户离开页面时不会激活。因此，如果有人打开计数器，然后关闭页面，当他打开它时，倒数将从上次打开页面时开始继续。您可以通过在

localStorage

中输入计数器应完成的时间并设置间隔来计算每分钟的时间来解决此问题。：）这就是全部