2017-03-31 63 views
1

我想這是我的JavaScript代碼能夠被讀取3小時倒計時,並重定向到倒計時後,一個新的頁面完成JavaScript的倒計時附和錯誤的時間

<script type="text/javascript"> 
// properties 
var count = 0; 
var counter = null; 

window.onload = function() { 
initCounter(); 
}; 

function initCounter() { 
// get count from localStorage, or set to initial value of 1000 
count = getLocalStorage('count') || 1000; 
counter = setInterval(timer, 1000); //1000 will run it every 1 second 
} 

function setLocalStorage(key, val) { 
if (window.localStorage) { 
    window.localStorage.setItem(key, val); 
} 

return val; 
} 

function getLocalStorage(key) { 
return window.localStorage ? window.localStorage.getItem(key) : ''; 
} 

function timer() { 
count = setLocalStorage('count', count - 1); 
if (count == -1) { 
    clearInterval(counter); 
    return; 
} 

var seconds = count % 60; 
var minutes = Math.floor(count/60); 
var hours = Math.floor(minutes/60); 
minutes %= 60; 
hours %= 60; 

document.getElementById("timer").innerHTML = hours + "hours " + minutes + "minutes and " + seconds + " seconds left to complete this transaction"; // watch for spelling 
} 
</script> 
<div id="timer"></div> 

請幫助我變得更好用使其倒計時到三小時,倒計時完成後又重定向到另一頁

回答

2

您沒有正確設置總時間。您將其設置爲16分鐘而不是3小時。這裏是工作的代碼(試試JSFiddle):

var time = 60 * 60 * 3; 
var div = document.getElementById("timer"); 
var t = Date.now(); 

var loop = function(){ 
    var dt = (Date.now() - t) * 1e-3; 

    if(dt > time){ 
    doWhateverHere(); 
    }else{ 
    dt = time - dt; 
    div.innerHTML = `Hours: ${dt/3600 | 0}, Minutes: ${dt/60 % 60 | 0}, Seconds: ${dt % 60 | 0}`; 
    } 

    requestAnimationFrame(loop); 
}; 

loop(); 

另外,不要使用setIntervalsetTimeout精確計時。這些功能是不穩定的。改爲使用Date.now()

+0

我只是想讓你幫我檢查一下我將在三個小時內完成任務而不改變我的代碼。 – phemieny7

+0

@ phemieny7。 'count = getLocalStorage('count')|| 3600 * 3'而不是'count = getLocalStorage('count')|| 1000'。但我**強烈**推薦你不要在這種情況下使用'setInterval'和'setTimeout'函數。 – user7771338

+0

是的,我愛你的代碼,但我得到的問題是,它重新啓動時,頁面刷新。如果你能糾正這一點,我真的很喜歡使用它。請幫我糾正一下。謝謝。 – phemieny7