倒数计时器在刷新时重新加载

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

倒数计时器在刷新时重新加载

回答

相关问题