javascript - 防止定时器重置

Question

这个问题已经有答案了:

Countdown timer resets on page refresh (1 个回答)

已关闭 9 年前。

我正在制作一个倒计时器脚本，当时间达到 0 时退出程序。

问题是，当页面重新加载时，计时器再次从头开始..

有什么办法可以防止计时器重置吗？

  // set the date we're counting down to
  var target_date = new Date().getTime();
  var delay=100;
  // variables for time units
  var days, hours, minutes, seconds;

  // get tag element
  var countdown = document.getElementById("countdown");

  // update the tag with id "countdown" every 1 second
  setInterval(function () {

        // find the amount of "seconds" between now and target
        var current_date = new Date().getTime();
        var seconds_left = (current_date - target_date) / 1000;
        var a=(delay-seconds_left);
        // do some time calculations

        minutes = parseInt(a / 60);
        seconds = parseInt(a % 60);
        var progress = a/delay*100;

        // format countdown string + set tag value
        countdown.innerHTML = '<div  Class=outer style="font-size:20px;width:'+progress+'%">'+minutes + "m: " + seconds + "s" + '</div>';

        if(a <= 0)
        {
        window.open("a.html")

        self.close();
        //var wind = window.open("a.html");    
        }

  }, 1000);

Answer 1

您可以将target_date存储在本地存储(或cookie)中，并在页面加载时查找它。例如:

var target_date = localStorage.target_date;
if (target_date) {
    // Found it in local storage, turn the string into a number
    target_date = parseInt(target_date);
} else {
    // Didn't find it in local storage, get the target and 
    target_date = new Date().getTime(); // See below, this looks weird
    localStorage.target_date = String(target_date);
}

本地存储为quite well-supported in modern browsers .

请注意，只有字符串和某些其他与存储兼容的项目可以存储在本地存储中，这就是为什么我明确处理上述数字的字符串版本。如果您需要存储更复杂的信息，JSON 通常是一种有用的格式。

<小时/>

您的代码初始化target_date对我来说没有多大意义:它捕获了现在的时间。我希望倒计时可以在target_date的 future 中占据一个时间。无论如何，请根据需要替换该行(或替换您正在存储的内容)。