Javascript 刷新时重新加载倒计时计时器_Javascript_Php_Web Applications_Countdowntimer_Web Application Design

Javascript 刷新时重新加载倒计时计时器

javascript php web-applications

Javascript 刷新时重新加载倒计时计时器,javascript,php,web-applications,countdowntimer,web-application-design,Javascript,Php,Web Applications,Countdowntimer,Web Application Design,javascript中的倒计时计时器代码。但当页面刷新时，它会再次重新启动。我希望计时器应该继续，即使它重新启动帮助我处理这个问题，因为我是初学者，这是我的第一个应用程序，我需要您提供一些详细的输入 ` <body> <div id="divCounter"></div> <script type="text/javascript"> var hoursleft = 0; var minutesleft = 35; // y

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>
 `

`
var hoursleft=0；
var minutesleft=35；//可以将这些值更改为大于0的任何值
var secondsleft=0；
var finishedtext=“倒计时完成！”//倒计时达到0时显示的文本
var end=新日期（）；
end.setMinutes（end.getMinutes（）+minutesleft）；
end.setSeconds（end.getSeconds（）+secondsleft）；
if（localStorage.getItem（“计数器”））{
var值=localStorage.getItem（“计数器”）；
}否则{
var值=0；
}
变量计数器=函数（）{
var now=新日期（）；
var diff=结束-现在；
diff=新日期（diff）；
var sec=diff.getSeconds（）；
var min=diff.getMinutes（）；
如果（最小值<10）{
最小值=“0”+最小值；
}
如果（第10节）{
秒=“0”+秒；
}
如果（现在>=结束）{
清除超时（timerID）；
document.getElementById（'divCounter'）。innerHTML=finishedtext；
}
否则{
var值=分钟+“：”+秒；
//document.getElementById（'divCounter'）。innerHTML=min+“：”+sec；
setItem（“counter”，JSON.stringify（value））；
}      
//timerID=setTimeout（“cd（）”，1000）；
//value=JSON.parse（localStorage.getItem（“计数器”）；
//$（'#divCounter'）。追加（值）；
document.getElementById（'divCounter'）。innerHTML=value；
}
var interval=setInterval（函数（）{counter（）；}，1000）；
`

您需要将计时器值存储在cookie中

刷新后，检查cookie是否已设置，如果已设置，则获取值并将其设置为计时器的初始时间，

否则从0开始，这里您要做的是设置要倒计时的日期/时间，获取当前用户的日期/时间，然后计算要倒计时的差值

以下内容将帮助您朝着正确的方向前进：

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

虽然您正在从本地存储器中读取值变量，但实际上并没有将结束时间和现在时间设置为它们的旧值，因此它们会被重置，也会重置值变量。您还应该将这些值存储在内存中，并在刷新页面时加载它们

这是完成的、功能齐全的优化代码。现在应该可以了

<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>


var hoursleft=0；
var minutesleft=35；
var secondsleft=0；
var finishedtext=“倒计时完成！”；
var端；
if（localStorage.getItem（“end”））{
end=新日期（localStorage.getItem（“end”）；
}否则{
结束=新日期（）；
end.setMinutes（end.getMinutes（）+minutesleft）；
end.setSeconds（end.getSeconds（）+secondsleft）；
}
变量计数器=函数（）{
var now=新日期（）；
var diff=结束-现在；
diff=新日期（diff）；
var sec=diff.getSeconds（）；
var min=diff.getMinutes（）；
如果（最小值<10）{
最小值=“0”+最小值；
}
如果（秒<10）{
秒=“0”+秒；
}     
如果（现在>=end）{
清除超时（间隔）；
setItem（“结束”，null）
document.getElementById（'divCounter'）。innerHTML=finishedtext；
}否则{
var值=分钟+“：”+秒；
setItem（“结束”，结束）；
document.getElementById（'divCounter'）。innerHTML=value；
}
}
var间隔=设置间隔（计数器，1000）；

倒计时，您可以选择任何时间。刷新页面时，它不会重新启动

<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>


//var hoursleft=0；
var minutesleft=0//给你想要的分钟
var secondsleft=30；//给你想要的几秒钟
var finishedtext=“倒计时完成！”；
var end1；
if（localStorage.getItem（“end1”））{
end1=新日期（localStorage.getItem（“end1”）；
}否则{
end1=新日期（）；
end1.setMinutes（end1.getMinutes（）+minutesleft）；
end1.setSeconds（end1.getSeconds（）+secondsleft）；
}
变量计数器=函数（）{
var now=新日期（）；
var diff=end1-现在；
diff=新日期（diff）；
var毫秒=parseInt（（差异%1000）/100）
var sec=parseInt（（差异/1000）%60）
var mins=parseInt（（差/（1000*60））%60）
//var小时=parseInt（（差/（1000*60*60））%24）；
如果（分钟<10）{
分钟=“0”+分钟；
}
如果（秒<10）{
秒=“0”+秒；
}     
如果（现在>=end1）{
清除超时（间隔）；
//setItem（“end”，null）；
localStorage.removietem（“end1”）；
localStorage.clear（）；
document.getElementById（'divCounter'）。innerHTML=finishedtext；
如果（确认（“超时！”）
window.location.href=“timeup.php”；
}否则{
var值=分钟+“：”+秒；
setItem（“end1”，end1）；
document.getElementById（'divCounter'）。innerHTML=value；
}
}
var间隔=设置间隔（计数器，1000）；

如何将这些值存储在内存中，并在刷新页面时加载它们。请给我解释一下，或者给我学习的链接there@SMadhu我上传了一个新的答案-你可以从那里复制代码谢谢，它正在工作，但当我想再试一次，而不是时间，我会得到“NaN:NaN”。如何重置计时器？使用此-

localStorage.setItem（“end”，null）