При нажатии Start Timer with No reset time on page refre sh in JS или Jquery?

Question

1. Я пытаюсь создать таймер обратного отсчета, который будет запускаться при нажатии кнопки, как будто на экране будут отображаться 30 минут. После того, как пользователь нажмет кнопку «Пуск», он должен запуститься

2. Если пользователь обновляет страницу, время не сбрасывается.

3. Кнопка Stop для остановки счетчика.

I я могу создать часть 1, но она каждый раз сбрасывается.

Вот мой код:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


 <a href="#" id="startClock">Start Clock</a>


 <span id="count">50</span> seconds

 <script>


 function startTimer(){
 var counter = 50;
  setInterval(function() {
   counter--;
  if (counter >= 0) {
  span = document.getElementById("count");
  span.innerHTML = counter;
}
if (counter === 0) {
    alert('sorry, Lab Ended');
    clearInterval(counter);
}
  }, 1000);
 }
$("#startClock").click(function(){
startTimer();
 });

 </script>

Answer 1

Вы можете попытаться сохранить свое состояние счетчика, используя window.localStorage.setItem(key, value), а позже получить состояние счетчика с помощью window.localStorage.getItem(key). И вы удаляете счетчик из localStorage с помощью window.localStorage.removeItem(key), если счетчик завершен.

Попробуйте приведенный ниже код с функциями паузы и перезапуска:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

 <a href="#" id="restartClock">Restart Clock</a>
 <a href="#" id="startClock">Start Clock</a>
 <a href="#" id="pauseClock">Pause Clock</a>


 <span id="count">50</span> seconds

 <script>
   var initialValue = 50;
   $(document).ready(function() {
     var counter = localStorage.getItem("counter");
     var canCount = true;
     var id;
     if (counter) {
       $("span#count").html(counter);
     } else {
       localStorage.setItem("counter", initialValue);
       counter = initialValue;
       $("span#count").html(initialValue);
     }

     function startTimer() {
       if (localStorage.getItem("counter") && id === undefined) {
         id = setInterval(function() {
           if (canCount) {
             localStorage.setItem("counter", --counter);
             span = document.getElementById("count");
             span.innerHTML = counter;
             if (counter <= 0) {
               localStorage.removeItem("counter")
               clearInterval(id);
               id = undefined;
             }
           }
         }, 1000);
       }
     }

     $("#startClock").click(startTimer);

     $("#restartClock").click(function(){
        counter = initialValue;
        localStorage.setItem("counter", counter);
        $("span#count").html(counter);
     });

     $("#pauseClock").click(function() {
       $(this).html(canCount?"Continue Clock":"Pause Clock");
       canCount = !canCount;
     });
   });

 </script>

Answer 2

 function startTimer(){
  var counter = 1800000;
   setInterval(function() {
     counter--;
    if (counter >= 0) {
     localStorage.setItem("counter", counter);
     span = document.getElementById("count");
     span.innerHTML = localStorage.getItem("counter");
     counter = $('#count').text();
     }
     if (counter == 0) {
       alert('sorry, Lab Ended');
       clearInterval(counter);
       localStorage.clear('counter');
     }
    }, 1000);
   }
   $("#startClock").click(function(){
     startTimer();
    });

вы можете попробовать локальное хранилище, чтобы сделать это, надеюсь, что приведенный выше код вам поможет.

Answer 3

Что вам нужно сделать, так это рассчитать временную метку на 30 минут вперед и сохранить ее в локальном хранилище. При загрузке страницы вы должны сначала заглянуть в локальное хранилище, чтобы проверить, есть ли запущенный таймер, если есть, затем показать, что он запускает интервал с обратным отсчетом, если это не так, вы вычисляете метку времени, сохраните ее в локальном хранилище и запустите обратный отсчет