Question

我使用的是在Google中找到的倒数计时器，我只是修改了几行代码以使计时器递增计数，而不是递减计数。我只希望计时器递增计数，然后在单击“停止”按钮时停止计时。我的问题是，即使页面刷新或浏览器重新启动，我也希望计时器不重置。据我所知，我需要为此使用cookie，但是我不知道如何将其合并到我的代码中。请帮忙。

这是我的代码。

(function() {
  $(document).ready(function() {
    var time = "00:00:00",
      parts = time.split(':'),
      hours = +parts[0],
      minutes = +parts[1],
      seconds = +parts[2],
      span = $('#countup');

    function correctNum(num) {
      return (num < 10) ? ("0" + num) : num;
    }

    var timer = setInterval(function() {
      seconds++;
      if (seconds > 59) {
        minutes++;
        seconds = 0;

        if (minutes > 59) {
          hours++;
          seconds = 0;
          minutes = 0;

          if (hours >= 24) {
            alert("timer finished");
          }
        }
      }
      span.text(correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds));
    }, 1000);
  });
})()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="countup">00:00:00</span>

Answer 1

我认为您应该使用本地存储来存储时间。最好将时间存储在卸载页面事件上

Answer 2

保持倒数计时的最佳方法可能是将倒数计时的结束保存为固定的时间点（例如JavaScript支持的UNIX时间戳），然后重新计算本地时间与页面加载时节省的时间。实际上，有诸如Moment.js之类的便捷库可以帮助您进行时间操作。

我建议在Cookie上使用LocalStorage，Cookie也将发送到服务器，并且更多地用于身份验证/会话令牌。这是一篇很好的入门文章：

https://www.taniarascia.com/how-to-use-local-storage-with-javascript/

Answer 3

Working script using 24 seconds instead of 24 hours-计时器结束后它将重置，因此下一次刷新页面时它将从0开始

取消注释这些行以使用有效的脚本。

注意更改

var savedDate = "", // +localStorage.getItem("date"),

到

var savedDate = +localStorage.getItem("date"),

const pad = (num) => ("0" + num).slice(-2);

$(function() {
  var savedDate = "", // +localStorage.getItem("date"),
    date = new Date();
  if (savedDate && !isNaN(savedDate)) date = new Date(savedDate);
  else date.setHours(0, 0, 0, 0);


  var hours = date.getHours(),
    minutes = date.getMinutes(),
    seconds = date.getSeconds(),
    $span = $('#countup');

  var timer = setInterval(function() {
    date.setSeconds(date.getSeconds() + 1);
    if (date.getHours() >= 24) {
      clearInterval(timer);
      $span.text("timer finished");
      // localStorage.removeItem("date");
    } else {
      $span.text(
        pad(date.getHours()) + ":" +
        pad(date.getMinutes()) + ":" +
        pad(date.getSeconds())
      );
      // localStorage.setItem("date", date.getTime())
    }
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="countup"></span>

Answer 4

例如，您可以使用localstorage在其中保存计时器，然后再使用它。请尝试以下示例：

// Set an item to localstorage
localStorage.setItem('name', 'value');

// Read the item from localstorage
localStorage.getItem('name'); => // => 'value'

在您的代码中，它应类似于：

(function(){
  $(document).ready(function() {

    var time = localStorage.getItem('timer') || "00:00:00",
        parts = time.split(':'),
        hours = +parts[0],
        minutes = +parts[1],
        seconds = +parts[2],
        span = $('#countup');

    function correctNum(num) {
        return (num<10)? ("0"+num):num;
    }

    var timer = setInterval(function(){
        seconds++;
        if(seconds > 59) {
            minutes++;
            seconds = 0;

            if(minutes > 59) {
                hours++;
                seconds = 0;
                minutes = 0;

                if(hours >= 24) {
                  alert("timer finished");
                }
            }
        }

        var displayTime = correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds);
        localStorage.setItem('timer', displayTime);
        span.text(displayTime);
    }, 1000); 
  }); 
})()

我有一个JavaScript计时器，但是即使刷新或重新启动浏览器，我也希望计时器继续运行

4 个答案: