[英]How to continue timer after page is refreshed?
目前,我的代碼中有這個JavaScript
function startTimer(duration, display) { var timer = duration, minutes, seconds; setInterval(function() { minutes = parseInt(timer / 60, 10); seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; if (--timer < 0) { timer = 0; } }, 1000); } window.onload = function() { var fiveMinutes = 60 * 0.18, display = document.querySelector('#time'); startTimer(fiveMinutes, display); //`enter code here` };
<div id="time"></div>
刷新時如何保持計時器運行? 使用Cookie是唯一的方法嗎?
我認為,如果您在服務器端沒有數據庫之類的東西和/或用戶未登錄,那么cookie是最好的選擇:
這可能有助於您入門,定義設置並獲取每個Cookie函數
組
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
得到
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
在文檔中的某個位置(也許在計時器中),將Cookie設置為:
setCookie("minutes", minutes.toString(), 1);
setCookie("seconds", seconds.toString(), 1);
然后在加載事件中的某處,通過get函數設置變量,如下所示:
minutes = getCookie("minutes");
seconds = getCookie("seconds");
那只是關於如何制作cookie的指針,這是工作代碼。 在這里查看小提琴: https : //jsfiddle.net/edencorbin/hht4yqka/1/您需要調整計時器,我將其設置為10:00。
<script>
var minutes = 0;
var seconds = 0;
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
setInterval(function() {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
setCookie("minutes", minutes.toString(), 1);
setCookie("seconds", seconds.toString(), 1);
if (--timer < 0) {
timer = 0;
}
}, 1000);
}
window.onload = function() {
var minutes_data = getCookie("minutes");
var seconds_data = getCookie("seconds");
var timer_amount = (60*10); //default
if (!minutes_data || !seconds_data){
//no cookie found use default
}
else{
timer_amount = parseInt(minutes_data*60)+parseInt(seconds_data)
}
var fiveMinutes = timer_amount,
display = document.querySelector('#time');
startTimer(fiveMinutes, display); //`enter code here`
};
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
</script>
<div id="time"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.