Неизменный обратный таймер

137

24 апреля 2019, 10:30

Не подскажите, как сделать 30 секундный обратный таймер на странице, который не меняется при обновлении страницы или при изменении пользователем часового пояса на устройстве. Буду благодарен.

Answer 1

Вот как самый примитивный вариант :) Часовой пояс можно игнорировать путем общего для всех серверного времени (серверного объекта Date() ) который пропускать через тот же setInterval(callback,1000);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title class="timerForTitle">Title</title>
</head>
<body>
<script>
   if(!sessionStorage.timerForTitle){
       sessionStorage.timerForTitle = 30;
   }
  var timer =  setInterval(function () {
      var count = Number(sessionStorage.timerForTitle);
      if(--count >= 0){
          sessionStorage.timerForTitle = count;
          document.querySelector('.timerForTitle').innerHTML = 'Title '+count;
      }else{
          document.querySelector('.timerForTitle').innerHTML = 'Title finish';
        sessionStorage.timerForTitle = 30;
        clearInterval(timer);
        // тут перенаправление
      }
  },1000);
</script>

</body>
</html>