Вопрос по JavaScript и HTML

150

24 августа 2018, 16:00

Всем привет. Я написал скрипт для сайта он берет параметр из тега p и каждый час вычитает по 1 и вставляет обратно, но при обновлении страницы счетчик начинается заново. Как это исправить? Заранее спасибо.

var updateTimer = function() { 
  var watch = document.getElementById('watch'); 
  var count = Number(watch.innerHTML); 
  if(count == 0){ 
  	watch.innerHTML = count; 
  } 
  else{ 
  watch.innerHTML = count -= 1; 
} 
}; 
 
setInterval(updateTimer, 1000);

<p><span id="watch">16</span></p>

Answer 1

Если нужно считать время до определённой даты, то можно воспользоваться объектом Date.

var summerEnd = new Date(2018,8,1),//Конечная дата(месяцы начинаются с 0 , поэтому сентябрь - восьмой) 
    now = new Date(),//текущая дата 
    watch = document.getElementById('watch'); 
function updateTimer() { 
  now.setSeconds(now.getSeconds() + 1);//обновляем текущую дату 
  watch.innerHTML=((summerEnd - now)/1000).toFixed(); 
}; 
 
setInterval(updateTimer, 1000);

#watch{ 
  display:block; 
} 
#watch:after{ 
  content: ' секунд'; 
}

<p> 
  <span>До конца лета осталось:</span> 
  <span id="watch"></span> 
</p>

Answer 2

Чтобы таймер при перезагрузке страницы не сбрасывался, время таймера нужно хранить в localStorage.

P.S. При использовании localStorage на StackOverflow будет писать ошибку.

var watch = document.getElementById('watch'); 
var count; 
 
if (localStorage['count'] == '0') 
    count = 16; 
else 
    count = localStorage['count']; 
 
watch.innerText = count; 
 
var updateTimer = function () { 
    watch.innerText = count; 
 
    if (count > 0) { 
        watch.innerText = count -= 1; 
        localStorage['count'] = count; 
    } 
}; 
 
setInterval(updateTimer, 1000);