код таймера обратного отсчета в 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>
'
таймер обратного отсчета в любое время. Он не перезапускается при обновлении страницы.
<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>
Здесь готовый, полностью функциональный, оптимизированный код. Он должен работать сейчас!
<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 date = new Date(Date.UTC(2015, 5, 28, 12, 0, 0));
var now = new Date();
var diff = date.getTime()/1000 - now.getTime()/1000;
Хотя вы читаете переменную значений из локального хранилища, вы фактически не устанавливаете окончание и теперь время на их старые значения, поэтому они получают сброс, а также сброс переменной значения. Вы также должны сохранить эти значения в памяти и загрузить их при обновлении страницы.
Вам нужно сохранить значение таймера в cookie,
после обновления, проверьте, установлен ли файл cookie, если он есть, получите значение и установите его как начальное время вашего таймера, иначе начните с 0