0

这是我关于 SO 的第一个问题 :)

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

非常感谢！

4

3 回答 3

2

试试这个，它使用你必须下载并包含在你的脚本中的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: '/' });
};

这是一个 jsfiddle 可以看到它的工作原理

这是一个带有启动和重置按钮的版本

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

还有另一个jsfiddle

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

更新

带有小时、分钟和秒的版本

于 2013-05-14T08:26:43.827 回答
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

于 2013-05-14T08:28:41.957 回答
1

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

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

于 2013-05-14T08:26:25.663 回答