Question

我是HTML和JavaScript的新手。当页面关闭或刷新时，我无法找到任何防止页面重启的计时器的解决方案。

我希望即使关闭页面/浏览器，计时器也会继续运行。

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

这里是我的计时器代码：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

使用cookie可以解决这个问题吗？如果是这样，怎么样？

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

附属话题，如果有任何＆＃34;免费＆＃34;服务器供人们上传HTML，以便其他人可以通过在线访问，这将是伟大的。

Answer 1

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

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

如果您碰巧使用了很多＆＃34;嵌套ifs＆＃34;您还可以选择使用switch和短路逻辑。

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

由于您只将元素存储到＆＃34;变量＆＃34;，只要本地会话处于活动状态，您的计时器就会运行（即，一旦您关闭浏览器/会话，所有存储的变量都将被清除）

如果您想在数据库中更多地使用数据存储和实际持久性数据，您至少应该在本地主机中进行开发＆＃34;环境，您可以使用＆＃34; Nodejs＆＃34;轻松设置。在https://nodejs.org/下载

希望这有助于您的编码开发之路！

Answer 2

简短的回答没有。 Javascript仅在您的浏览器处于打开状态时运行，不应用于保存任何数据。

如果你想要一个计时器，你应该使用服务器和服务器端语言，如PHP。

编辑：话虽如此，我发现Jquery plugin可能对您有用。

多个计时器继续（在后台运行）甚至页面/浏览器关闭或刷新

2 个答案: