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

我有一个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时.

我尝试了什么？

当t.total == 0时,我尝试创建另一个if语句来刷新页面,就像这样：

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;
}

但不知何故,它没有用.

所以我也试过,如果(t.total = 0)和if(t.total === 0)但仍然无法解决问题.

当计数器达到0时,有人可以帮我刷新页面吗？

如果你想玩,这里有一个jsFiddle：https://jsfiddle.net/qv6rbyLo/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/

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

猜你在找的JavaScript相关文章