如何在JavaScript中计算秒表/计时器

我正在尝试创建一个jQuery/JavaScript计时器，即使您离开页面，它也会继续运行

我尝试了一些插件来实现这一点，但最终我发现最有效的起点是用户Daniel_Hug遇到的一个JSFIDLE：

我已经更新了它，包括bootstrap3，添加了一些响应的样式，并将计时器的时间保存到cookie中，这样当你离开页面时，它会继续它停止的地方。这是我的最新版本：

HTML:

CSS:

如您所见，我正在使用以下值保存cookie：

00:02:28|Mon Mar 16 2015 10:29:42 GMT-0600 (MDT)

---

在上述示例中，

00:02:28

是计时器的当前时间，

2015年3月16日星期一10:29:42 GMT-0600（MDT）

是当前日期。如果计时器在窗口/选项卡关闭时仍在运行，那么计算计时器新值的最佳方法是什么？

这可能需要一些改进，但在找到cookie时运行的代码中：

var date = new Date(initialSegments[1]);
date.setHours(date.getHours() + parseInt(timerSegments[0],10), date.getMinutes() + parseInt(timerSegments[1],10), date.getSeconds() + parseInt(timerSegments[2],10));    
var secsDiff = ((date - new Date(initialSegments[1]))/1000);
var seconds = secsDiff%60,
    minutes = Math.floor(secsDiff/60),
    hours = Math.floor(secsDiff/(60*60));
add();

这样做的目的是从cookie中获取时间，并添加上最后一次保存到cookie中的计时器时间。然后计算出经过了多少时间，并将其相加

---

在这里尝试一下：

如果有人还在寻找一个完整的解决方案，我采用了@Jamiec的解决方案，并在上面构建了一个多定时器，当您关闭窗口、切换选项卡或导航离开页面时，它就会工作。可能会给某人指明正确的方向

关键的区别在于，我必须在@Jamiec的解决方案中添加这一点逻辑

var savedCookie = cookieTime,
    initialSegments = savedCookie.split('|'),
    savedTimer = initialSegments[0],
    timerSegments = savedTimer.split(':'),
    date = new Date(initialSegments[1]);

var currentTimeDifference = Math.round((new Date() - date)/1000);
if (localStorage[elements[index].timerName + '_started'] == 'true') {
    date.setHours(
        date.getHours() + parseInt(currentTimeDifference / (60 * 60), 10),
        date.getMinutes() + parseInt(Math.floor(currentTimeDifference / 60), 10),
        date.getSeconds() + parseInt(currentTimeDifference % 60, 10)
    );
}

date.setHours(
    date.getHours() + parseInt(timerSegments[0], 10),
    date.getMinutes() + parseInt(timerSegments[1], 10),
    date.getSeconds() + parseInt(timerSegments[2], 10)
);

---

关闭正在运行的窗口/选项卡时，javascript将不再运行。如果我这样做，我会将cookie设置为计时器启动的时间。然后你就可以得到这样的差异。按照您的操作方式，您也可以这样做，但必须将现有的秒表时间添加回

本地存储中的start
timestamp
。然后将其与当前时间进行比较以获取计时器。@Jacob建议我也可以这样做，您可以非常轻松地将两个日期/时间转换为毫秒，从另一个中减去一个，然后使用该值设置新计时器。将原始的
XX:XX:XX
计时器值也转换为毫秒，并将其添加到中似乎是一个不必要的步骤
00:02:28|Mon Mar 16 2015 10:29:42 GMT-0600 (MDT)

var date = new Date(initialSegments[1]);
date.setHours(date.getHours() + parseInt(timerSegments[0],10), date.getMinutes() + parseInt(timerSegments[1],10), date.getSeconds() + parseInt(timerSegments[2],10));    
var secsDiff = ((date - new Date(initialSegments[1]))/1000);
var seconds = secsDiff%60,
    minutes = Math.floor(secsDiff/60),
    hours = Math.floor(secsDiff/(60*60));
add();

var savedCookie = cookieTime,
    initialSegments = savedCookie.split('|'),
    savedTimer = initialSegments[0],
    timerSegments = savedTimer.split(':'),
    date = new Date(initialSegments[1]);

var currentTimeDifference = Math.round((new Date() - date)/1000);
if (localStorage[elements[index].timerName + '_started'] == 'true') {
    date.setHours(
        date.getHours() + parseInt(currentTimeDifference / (60 * 60), 10),
        date.getMinutes() + parseInt(Math.floor(currentTimeDifference / 60), 10),
        date.getSeconds() + parseInt(currentTimeDifference % 60, 10)
    );
}

date.setHours(
    date.getHours() + parseInt(timerSegments[0], 10),
    date.getMinutes() + parseInt(timerSegments[1], 10),
    date.getSeconds() + parseInt(timerSegments[2], 10)
);