倒计时结束时刷新页面

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)，如果(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 
}