如何在刷新页面后继续计时器

How to continue timer after page is refreshed?

本文关键字：继续 计时器 刷新      更新时间：2023-09-26

目前，我的代码中有这个JavaScript

function startTimer(duration, display) {
  var timer = duration,
      minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;
    if (--timer < 0) {
      timer = 0;
    }
  }, 1000);
}
window.onload = function() {
  var fiveMinutes = 60 * 0.18,
      display = document.querySelector('#time');
  startTimer(fiveMinutes, display); //`enter code here`
};
<div id="time"></div>

刷新时如何保持计时器运行？使用饼干是唯一的方法吗？

这只是关于如何制作cookie的指示，这是工作代码。在这里查看小提琴：https://jsfiddle.net/edencorbin/hht4yqka/1/您需要调整计时器，我将其设置为 10：00。

  <script>
  var minutes = 0;
  var seconds = 0;
  function startTimer(duration, display) {
    var timer = duration,
        minutes, seconds;
    setInterval(function() {
      minutes = parseInt(timer / 60, 10);
      seconds = parseInt(timer % 60, 10);
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      display.textContent = minutes + ":" + seconds;
      setCookie("minutes", minutes.toString(), 1);
      setCookie("seconds", seconds.toString(), 1);
      if (--timer < 0) {
        timer = 0;
      }
    }, 1000);
  }

  window.onload = function() {
     var minutes_data = getCookie("minutes");
     var seconds_data = getCookie("seconds");
     var timer_amount = (60*10); //default
      if (!minutes_data || !seconds_data){
        //no cookie found use default
      }
      else{
        timer_amount = parseInt(minutes_data*60)+parseInt(seconds_data)
      }
    var fiveMinutes = timer_amount,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display); //`enter code here`
  };
   function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
   } 
   function getCookie(cname) {
   var name = cname + "=";
   var ca = document.cookie.split(';');
   for(var i=0; i<ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1);
      if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
   }
   return "";
  } 
  </script>
  <div id="time"></div>

我认为如果你的服务器端没有数据库之类的东西和/或用户没有登录，cookie 是你最好的选择：

这可能有助于您入门，定义设置并获取每个cookie函数

设置

 function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
 }

获取

function getCookie(cname) {
 var name = cname + "=";
 var ca = document.cookie.split(';');
 for(var i=0; i<ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1);
    if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
 }
 return "";
}

在文档中的某个位置，也许在您的计时器中，将 cookie 设置为如下所示：

setCookie("minutes", minutes.toString(), 1);
setCookie("seconds", seconds.toString(), 1);

然后在加载事件中的某个地方通过 get 函数设置变量，如下所示：

minutes = getCookie("minutes");
seconds = getCookie("seconds");

在此处阅读更多内容 http://www.w3schools.com/js/js_cookies.asp

相关文章：