倒數計時器在刷新時重新加載

JavaScript中的倒計時器代碼。但是當頁面刷新時它會重新啓動。我希望計時器應該繼續，即使它重新啓動。倒數計時器在刷新時重新加載

幫我解決這個問題，因爲我是初學者這是我的第一個應用程序，我需要一些來自你的細節輸入。

` 
<body> 
<div id="divCounter"></div> 
<script type="text/javascript"> 

var hoursleft = 0; 
var minutesleft = 35;   // you can change these values to any value greater than 0 
var secondsleft = 0; 

var finishedtext = "Countdown finished!" // text that appears when the countdown reaches 0 
var end = new Date(); 

end.setMinutes(end.getMinutes()+minutesleft); 
end.setSeconds(end.getSeconds()+secondsleft); 


if(localStorage.getItem("counter")){ 

    var value = localStorage.getItem("counter"); 

}else{ 
    var value = 0; 
} 


var counter = function(){ 


    var now = new Date(); 
var diff = end - now; 
diff = new Date(diff); 

var sec = diff.getSeconds(); 
var min = diff.getMinutes(); 

if (min < 10){ 
    min = "0" + min; 
} 
if (sec < 10){ 
    sec = "0" + sec; 
} 

if(now >= end){ 
    clearTimeout(timerID); 
    document.getElementById('divCounter').innerHTML = finishedtext; 
} 
else{ 
    var value = min + ":" + sec; 
//document.getElementById('divCounter').innerHTML = min + ":" + sec; 
localStorage.setItem("counter", JSON.stringify(value)); 
}  

// timerID = setTimeout("cd()", 1000); 
// value = JSON.parse(localStorage.getItem("counter")); 
//$('#divCounter').append(value); 
document.getElementById('divCounter').innerHTML = value; 
} 





var interval = setInterval(function(){counter();}, 1000); 
</script> 
</body> 
`

來源

2015-05-28 S Madhu

無論您想要什麼時間倒數計時器。刷新頁面時不會重新啓動。

<body> 
<div id="divCounter"></div> 


<script> 
//var hoursleft = 0; 
var minutesleft = 0; //give minutes you wish 
var secondsleft = 30; // give seconds you wish 
var finishedtext = "Countdown finished!"; 
var end1; 
if(localStorage.getItem("end1")) { 
end1 = new Date(localStorage.getItem("end1")); 
} else { 
end1 = new Date(); 
end1.setMinutes(end1.getMinutes()+minutesleft); 
end1.setSeconds(end1.getSeconds()+secondsleft); 

} 
var counter = function() { 
var now = new Date(); 
var diff = end1 - now; 

diff = new Date(diff); 

var milliseconds = parseInt((diff%1000)/100) 
    var sec = parseInt((diff/1000)%60) 
    var mins = parseInt((diff/(1000*60))%60) 
    //var hours = parseInt((diff/(1000*60*60))%24); 

if (mins < 10) { 
    mins = "0" + mins; 
} 
if (sec < 10) { 
    sec = "0" + sec; 
}  
if(now >= end1) {  
    clearTimeout(interval); 
    // localStorage.setItem("end", null); 
    localStorage.removeItem("end1"); 
    localStorage.clear(); 
    document.getElementById('divCounter').innerHTML = finishedtext; 
    if(confirm("TIME UP!")) 
    window.location.href= "timeup.php"; 
} else { 
    var value = mins + ":" + sec; 
    localStorage.setItem("end1", end1); 
    document.getElementById('divCounter').innerHTML = value; 
} 
} 
var interval = setInterval(counter, 1000); 
</script> 
</body>

來源

2015-06-02 08:06:34

你需要存儲的計時器值一個cookie，

刷新後，檢查是否設置cookie，如果是，獲得的價值，並將其設置爲你的計時器的初始時間，否則從0開始

來源

2015-05-28 06:05:52

你想在這裏做的是設置倒計時的日期/時間，並獲取當前用戶的日期/時間，然後鍛鍊差異來倒計時。

像下面這樣將有助於推動你在正確的方向：

var date = new Date(Date.UTC(2015, 5, 28, 12, 0, 0)); 
var now = new Date(); 
var diff = date.getTime()/1000 - now.getTime()/1000;

來源

2015-05-28 06:06:29

雖然你在從本地存儲變量的值，讀書，你不是在實際設置結束，現在是時候了舊值，因此他們正在重置，也重置值變量。您還應該將這些值存儲在內存中，並在刷新頁面時加載它們。

來源

2015-05-28 06:12:44 kabiroberai

如何將這些值存儲在內存中，並在刷新頁面時加載它們。請解釋我，否則給鏈接，我會從那裏學習 –

@SMadhu我上傳了一個新的答案 - 你可以從那裏複製代碼 – kabiroberai

謝謝你正在工作，但是當我想再次嘗試它而不是時間我越來越「楠：NAN」。我怎樣才能重置計時器？ –

下面是完成的，功能齊全的優化代碼。它應該現在工作！

<body> 
<div id="divCounter"></div> 
<script> 
var hoursleft = 0; 
var minutesleft = 35; 
var secondsleft = 0; 
var finishedtext = "Countdown finished!"; 
var end; 
if(localStorage.getItem("end")) { 
    end = new Date(localStorage.getItem("end")); 
} else { 
    end = new Date(); 
    end.setMinutes(end.getMinutes()+minutesleft); 
    end.setSeconds(end.getSeconds()+secondsleft); 
} 
var counter = function() { 
    var now = new Date(); 
    var diff = end - now; 
    diff = new Date(diff); 
    var sec = diff.getSeconds(); 
    var min = diff.getMinutes(); 
    if (min < 10) { 
     min = "0" + min; 
    } 
    if (sec < 10) { 
     sec = "0" + sec; 
    }  
    if(now >= end) {  
     clearTimeout(interval); 
     localStorage.setItem("end", null) 
     document.getElementById('divCounter').innerHTML = finishedtext; 
    } else { 
     var value = min + ":" + sec; 
     localStorage.setItem("end", end); 
     document.getElementById('divCounter').innerHTML = value; 
    } 
} 
var interval = setInterval(counter, 1000); 
</script> 
</body>

來源

2015-05-28 18:09:39 kabiroberai

倒數計時器在刷新時重新加載

回答

相關問題