javascript - 倒计时结束时刷新页面

Question

我有一个 javascript 倒计时脚本，我希望我的页面在倒计时结束时刷新一次。

这是我的完整代码。

//JavaScript code for countdown
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.now();
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime); 



if (t.total < 0) {
  document.getElementById("clockdiv").className = "hidden-div";
  document.getElementById("timeIsNow").className = "visible-div";
  clearInterval(timeinterval);
  return true;
}

daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = '2015-12-31T13:00:00+02:00';
console.log(deadline);

initializeClock('clockdiv', deadline);

这是我想用于刷新的代码:

location.reload();

如果我在下面的这部分代码中添加这个刷新代码，刷新就会起作用。

if (t.total < 0) {
  document.getElementById("clockdiv").className = "hidden-div";
  document.getElementById("timeIsNow").className = "visible-div";
  clearInterval(timeinterval);
  location.reload(); //Added this one.
  return true;
}

但是，这种方式在倒计时结束后每秒刷新一次。但我希望它只在到达 0 时刷新一次。

我尝试了什么？

我尝试创建另一个 if 语句来在 t.total == 0 时刷新页面，如下所示:

if (t.total == 0) {
  document.getElementById("clockdiv").className = "hidden-div";
  document.getElementById("timeIsNow").className = "visible-div";
  clearInterval(timeinterval);
  location.reload(); //Added this one.
  return true;
}

但不知何故，它不起作用。

所以我也尝试了 if (t.total = 0) 和 if (t.total === 0) 但仍然无法解决.

谁能帮我在计数器达到 0 时刷新页面？

如果您想玩，这里有一个 jsFiddle:https://jsfiddle.net/qv6rbyLo/1/

Answer 1

问题是当你刷新页面时，你又开始计时了。然后立即完成，触发另一次刷新。

您需要检查截止日期已经过去的可能性，然后只有在开始计时时截止日期还没有过去的情况下才刷新。

这是更新后的 initializeClock(见评论):

function initializeClock(id, endtime, callback) {       // <== Add callback
    var clock = document.getElementById(id);
    var daysSpan = clock.querySelector('.days');
    var hoursSpan = clock.querySelector('.hours');
    var minutesSpan = clock.querySelector('.minutes');
    var secondsSpan = clock.querySelector('.seconds');
    var ranOnce = false;                                // <== Haven't run once yet

    var t = getTimeRemaining(endtime);

    function updateClock() {
        var t = getTimeRemaining(endtime);

        if (t.total < 0) {
            document.getElementById("clockdiv").className = "hidden-div";
            document.getElementById("timeIsNow").className = "visible-div";
            clearInterval(timeinterval);
            callback(ranOnce);                          // <== Tell callback whether we ran
            return true;
        }

        ranOnce = true;                                 // <== Flag that we ran at all
        daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    }

    var timeinterval = setInterval(updateClock, 1000);  // <=== Important that this is before the first call to updateClock
    updateClock();
}

...你会像这样使用它:

initializeClock('clockdiv', deadline, function(ranOnce) {
    if (ranOnce) {
        location.reload();
    }
});

这是一个在未来截止日期的实例:https://jsfiddle.net/mzabLrvy/

截止日期过去的地方:https://jsfiddle.net/mzabLrvy/1/