倒計時結束時刷新頁面

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 
}