防止页面刷新倒计时？答案

【问题标题】：prevent countdown on page refresh?防止页面刷新倒计时？
【发布时间】：2017-10-27 12:21:56
【问题描述】：

非常感谢大家。今天我正在尝试创建倒计时并以 15 分钟的间隔再次重置。我在 javascript 中使用这些代码。

Javascript------

<script type="text/javascript">

$(document).ready(function(){
    setInterval(function(){
        countdown();
    }, 54000);
})

var mins = 15;
var secs = mins * 60;

function countdown() {
  setTimeout('Decrement()',1000);
}
function Decrement() {
   if (document.getElementById) {
       minutes = document.getElementById("minutes");
       seconds = document.getElementById("seconds");

        if (seconds < 59) {
            seconds.innerHTML = secs;
        } else {
           minutes.innerHTML = getminutes();
            seconds.innerHTML = getseconds();
        }
        secs--;
        if(secs > 0)
          {
           setTimeout('Decrement()',1000);
        }
        }
        }
        function getminutes() {
        // minutes is seconds divided by 60, rounded down
        mins = Math.floor(secs / 60);
        return mins;
        }
        function getseconds() {
        // take mins remaining (as seconds) away from total seconds 
        remaining
        return secs-Math.round(mins *60);
        }
 </script>

在页面加载时调用这个倒计时函数

 <body onload="countdown();">

    TIME LEFT: <label id="minutes"></label> : <label id="seconds"></label>
 </body>

如您所见，此倒计时在页面加载时开始，我尝试在 15 分钟的时间间隔后重新开始倒计时....

但我想以 15 分钟的间隔运行此倒计时，并在页面刷新时保持继续..

请更正此代码给我另一个参考。

【问题讨论】：

使用 cookie 存储他们离开页面的时间。这里没有 PHP……或者您可以将开始时间存储为 cookie，然后始终从中减去。我想这取决于您允许在您的网站上停留 15 分钟还是从开始时间开始 15 分钟。
非常感谢您回复我，请您给我更多的提示，因为我没有更多关于 jquery cookie 的知识。
这个帖子应该可以帮到你stackoverflow.com/questions/14573223/….

标签： javascript jquery

【解决方案1】：

您可以使用本地存储，例如：

localStorage.setItem('countDownValue', curtime); // To set the value
...
curtime = localStorage.getItem('countDownValue'); // To get the value

欲了解更多信息，请访问 - How to make countdown timer not reset when refresh the browser?

【讨论】：

【解决方案2】：

你处理时间的方式让你的生活变得有点困难。

这里有一个更简单的方法的建议，它还保留了localStorage中的剩余时间

  const cookieName = 'countDown';
  const savedSeconds = localStorage.getItem(cookieName);

  // If there are seconds saved in localStorage, start with these.
  // Otherwise, start with 900 seconds
  const fifteenMinutes = 900 // 15 minutes in seconds
  const startingSeconds = savedSeconds || fifteenMinutes;
  let remainingSeconds = startingSeconds;

  const minutesLabel = document.querySelector('#minutes');
  const secondsLabel = document.querySelector('#seconds');

  const countdown = () => {
    // If there are any remainingSeconds left, decrement by 1
    // If there are no remainingSeconds left, reset to 15 minutes
    remainingSeconds = remainingSeconds ? remainingSeconds-1 : fifteenMinutes;
    localStorage.setItem(cookieName, remainingSeconds);
    // Update the DOM
    minutesLabel.innerHTML = Math.floor(remainingSeconds/60);
    secondsLabel.innerHTML = remainingSeconds%60;
  }

  // Call countdown every second.
  setInterval(
    countdown,
    1000
  );

【讨论】：

谢谢#MarcDavies 现在 coundown 可以连续工作，但它会从页面刷新开始重新开始，所以这也是一个问题，因为它应该在页面刷新时继续，而不是从开始继续......
@Anushkasharma 抱歉，里面有小虫子。我没有在开始时将 startingSeconds 分配给 remainingSeconds 。修复了上面的代码，现在应该可以正常工作了:)
非常感谢@MarcDavies。现在它按要求工作。但是我也可以将其转换为 php 中服务器端倒计时的代码吗？因为倒计时不会在差异中显示相同的结果。 pcs 对...
老兄对不起，我已经好几年没写 PHP 了。我也不完全清楚你想在这里实现什么？希望我还是有用的:)