多个定时器继续(在后台运行),即使页面/浏览器被关闭或刷新


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

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

我想计时器将继续运行,即使我关闭页面/浏览器。

例如:如果计时器倒数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>

使用cookie可以解决这个问题吗?如果有,怎么做?

我没有使用PHP或AJAX或jQuery,因为我还没有学会。我没有服务器来发布HTML文件,所以我找到了一个解决方案,即使用谷歌驱动器发布。

如果有任何"免费"的服务器供人们上传HTML,以便其他人可以通过在线访问,那将是伟大的。

简短的回答不是。Javascript只会在你的浏览器打开时运行,不应该用来保存任何数据。

如果你想要一个定时器,你应该使用服务器和服务器端语言,如PHP来完成它。

编辑:话虽如此,我发现了一个Jquery插件,可以使用你。

您应该尝试重构您的代码,例如:

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

你也可以选择使用switch如果你碰巧使用很多"嵌套if"和短路逻辑。

是的,当你进入javascript的世界时,你会发现很多有趣的库和框架(基本上有很多抽象的函数/方法,很多聪明的人已经为你预先写好了),你可以用它们来帮助你更快地开发函数!

因为你只把你的元素存储到一个"变量"中,你的计时器只会运行只要本地会话是活的(即所有存储的变量将被清除一旦你关闭你的浏览器/会话)。

如果你想在数据库中更多地使用数据存储和实际的持久化数据,你应该至少在一个"本地主机"环境中开发,你可以通过在https://nodejs.org/上下载使用"Nodejs"轻松设置。

希望这对你的编码发展道路有所帮助!