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/

Answer 2

您可以尝试使用GET参数停止刷新页面。

将此添加到您的js代码：

var _get = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i)
{
    var p=a[i].split('=', 2);
    if (p.length == 1)
        b[p[0]] = "";
    else
        b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'));

这将使您能够从js中轻松访问GET参数。

然后你可以写一个像这样的刷新页面函数：

function refreshPage(){
    if (typeof _get["isRefreshed"] === "undefined")
        return;

    window.location.href = "index.htm?isRefreshed=1";
    // "index.htm" is the current page of course
}

倒计时结束时刷新页面

2 个答案: