多个计时器继续（运行在后台）即使 page/browser 已关闭或刷新

Question

我是 HTML 和 JavaScript 的新手。我找不到任何解决方案来防止页面关闭或刷新时页面上的计时器自行重启。

我希望即使我关闭 page/browser，计时器仍会继续运行。

例如：如果计时器倒计时 1 小时，我将其激活并关闭。 30分钟后，我重新打开页面，剩余时间应该是30分钟。

这是我的计时器代码：

function countdown(element, hours, minutes, seconds, oritime) {
  var interval;
  var htemp = 0;
  var mtemp = 0;
  interval = setInterval(function() {
    var el = document.getElementById(element);
    if (seconds == 0) {
      if (minutes == 0) {
        if (hours == 0) {
          clearInterval(interval);
          el.innerHTML = oritime;
          return;
        } else {
          if (htemp == 0) {
            minutes = 0;
            seconds = 0;
            htemp = 1;
          }
        }
      } else {
        if (mtemp == 0) {
          seconds = 0;
          mtemp = 1;
        }
      }
    }
    if (hours > 0) {
      var hour_text = hours > 9 ? '' : '0';
    } else {
      var hour_text = '0';
    }
    if (minutes > 0) {
      var minute_text = minutes > 9 ? '' : '0';
    } else {
      var minute_text = '0';
    }
    var second_text = seconds > 9 ? '' : '0';
    el.innerHTML = hour_text + hours + ' : ' + minute_text + minutes + ' : ' + second_text + seconds;
    if (seconds == 0) {
      if (minutes == 0) {
        if (hours == 0) {
          clearInterval(interval);
          el.innerHTML = oritime;
          return;
        } else {
          if (htemp == 1) {
            hours--;
            minutes = 59;
            seconds = 60;
            htemp = 0;
          }
        }
      } else {
        if (mtemp == 1) {
          minutes--;
          seconds = 60;
          mtemp = 0;
        }
      }
    }
    seconds--;
  }, 1000);
}

<input type="button" onclick="countdown('timer1',0,5,0,'5');" value="Start Timer 1">
<div id='timer1' color='red'>5</div>
<input type="button" onclick="countdown('timer2',0,5,0,'5');" value="Start Timer 2">
<div id='timer2' color='red'>5</div>

使用cookies是否可以解决这个问题？如果是这样，如何？

我没有使用 PHP 或 AJAX 或 jQuery 因为我还没有学会。我没有发布 HTML 文件的服务器，所以我只是找到了一个使用 google 驱动器发布的解决方案。

题外话，如果有"free"服务器供大家上传HTML，让其他人可以在线访问，那就太好了。

Answer 1

您应该尝试稍微重构一下您的代码，例如：

if (seconds === 0 && minutes === 0 && hours === 0) {
// your else logic here...
}

如果你正好用到很多"nested ifs"和短路逻辑，你也可以选择使用switch

是的，当你进入 javascript 的世界时，你会发现很多有趣的库和框架（基本上有很多抽象的功能/方法，很多聪明才智的人已经为您预先编写好了）您可以使用它来帮助您更快地开发功能！

由于您只将元素存储到 "variable" 中，只要本地会话处于活动状态，您的计时器只会运行（即一旦您关闭 [=，所有存储的变量将被清除） =29=]).

如果您想更多地使用数据库中的数据存储和实际持久性数据，您至少应该在 "local host" 环境中进行开发，您可以使用 "Nodejs" 轻松设置，方法是下载https://nodejs.org/

希望这对您的编码开发之路有所帮助！

Answer 2

简答不。 Javascript 仅当您的浏览器打开时才会运行，不应用于保存任何数据。

如果你想要一个计时器，你应该使用服务器和像 PHP 这样的服务器端语言来实现它。

编辑：话虽如此，我发现了一个Jqueryplugin可能对你有用。

多个计时器继续（运行在后台）即使 page/browser 已关闭或刷新

Multiple Timer continue(running on background) even the page/browser is closed or refresh

html

javascript

php

timer

setinterval

多个计时器继续（运行 在后台）即使 page/browser 已关闭或刷新

Multiple Timer continue(running on background) even the page/browser is closed or refresh

html

javascript

php

timer

setinterval

多个计时器继续（运行在后台）即使 page/browser 已关闭或刷新