Javascript 或 Jquery 连续倒计时

Question

我想在 javascript 或 jquery 中创建一个简单的倒数计时器。

我已经使用 JS 实现了它，但我面临的问题是如果用户刷新页面然后计时器获得刷新。

我想要的是定时器不应该刷新。假设定时器是 5 分钟，如果用户在 1 分钟后刷新页面，定时器应该继续从 4 分钟而不是 5 分钟开始。这是代码片段。它在页面刷新时刷新计时器。

var timeoutHandle;
function countdown(minutes) {
    var seconds = 60;
    var mins = minutes
    function tick() {
        var counter = document.getElementById("timer");
        var current_minutes = mins-1
        seconds--;
        counter.innerHTML =
        current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        if( seconds > 0 ) {
            timeoutHandle=setTimeout(tick, 1000);
        } else {

            if(mins > 1){

               // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst
               setTimeout(function () { countdown(mins - 1); }, 1000);

            }
        }
    }
    tick();
}

countdown(2);

<div id="timer">2:00</div>

Answer 1

您只需更新 sessionStorage 和计数器，并在启动计数器时读取它。不幸的是，由于跨域策略，相关代码片段在 Whosebug 上不起作用 - 所以在 codepen https://codepen.io/anon/pen/opNpVe

上

function countdown(seconds) {
  seconds = parseInt(sessionStorage.getItem("seconds"))||seconds;

  function tick() {
    seconds--; 
    sessionStorage.setItem("seconds", seconds)
    var counter = document.getElementById("timer");
    var current_minutes = parseInt(seconds/60);
    var current_seconds = seconds % 60;
    counter.innerHTML = current_minutes + ":" + (current_seconds < 10 ? "0" : "") + current_seconds;
    if( seconds > 0 ) {
      setTimeout(tick, 1000);
    } 
  }
  tick();
}

countdown(120);

Javascript 或 Jquery 连续倒计时

Continuous Countdown Timer In Javascript or Jquery

javascript

jquery

timer

countdowntimer