Question

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

我需要一个jQuery或javascript中的计时器，它将倒计时15分钟，而不是显示关闭按钮。此外，当用户刷新页面时，它不应该重置，但要么在停止的地方继续，要么在完全倒计时之后不依赖于用户是否回来，即如果用户在16分钟后返回，他将看到消息和关闭按钮。有什么建议？

非常感谢你！

Answer 1

试试这个，它使用jquery-cookie您必须下载并包含在您的脚本中并适用于所有当前浏览器：

/* 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: '/' });
};

Here's a jsfiddle to see it working

And here's a version with buttons to start and reset

如果您希望时间通过，即使用户不在页面上，您也可以使用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: '/' });
};

And yet another jsfiddle

重要提示：这不安全，用户可以操作计数，但如果您想要安全编写脚本，则js不适合它。

<强>更新

A version with hours, minutes and seconds

Answer 2

这是一个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);
    });
});

http://jsbin.com/oqamil/1/edit

Answer 3

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

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

Jquery / Javascript计时器在刷新时不重启

3 个答案: