Как сохранить таймер обратного отсчета в JavaScript, когда пользователи переходят по отдельным маршрутам на веб-странице - PullRequest
Новая
       0

Как сохранить таймер обратного отсчета в JavaScript, когда пользователи переходят по отдельным маршрутам на веб-странице

1 голос
/ 09 июля 2020

Я пытаюсь создать веб-страницу, которая позволяет вам запускать таймер обратного отсчета, когда вы нажимаете кнопку запуска, и позволяет вам переходить к другому маршруту на веб-странице, запускать другой таймер и возвращаться к первую страницу и таймер еще работает. В настоящее время у меня работают кнопки и. Однако я не уверен, как заставить часы не сбрасываться. когда я перехожу на другую страницу. Эта веб-страница в основном написана с Python и Flask, но я использую JavaScript для функции времени. Это единственный JavaScript, с которым я работал, и большая часть его пришла из других сообщений. 

<div id=time>
<div><span id="hour"></span>:<span id="minute"></span>:<span id="seconds"></span></div>

<button id="start-btn">Start</button>
<button id="stop-btn">Pause</button>
<button id="reset-btn">Reset</button>
      
</div>
<script>
  let hour = 0;
  let minute = 0;
  let seconds = 0;
  let totalSeconds = 0;
  
  let intervalId = null;
  
  function startTimer() {
    ++totalSeconds;
    hour = Math.floor(totalSeconds /3600);
    minute = Math.floor((totalSeconds - hour*3600)/60);
    seconds = totalSeconds - (hour*3600 + minute*60);

    document.getElementById("hour").innerHTML =hour;
    document.getElementById("minute").innerHTML =minute;
    document.getElementById("seconds").innerHTML =seconds;
  }

  document.getElementById('start-btn').addEventListener('click', () => {
    intervalId = setInterval(startTimer, 1000);
  })
  
  document.getElementById('stop-btn').addEventListener('click', () => {
    if (intervalId)
      clearInterval(intervalId);
  });
  
   
  document.getElementById('reset-btn').addEventListener('click', () => {
     totalSeconds = 0;
     document.getElementById("hour").innerHTML = '0';
     document.getElementById("minute").innerHTML = '0';
     document.getElementById("seconds").innerHTML = '0';
  });

</script>

1 Ответ

0 голосов
/ 09 июля 2020

Если вы хотите предотвратить сброс вашего таймера, используйте ie повара, чтобы сохранить дату запуска таймера.

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

<!DOCTYPE html>
<html>
<head>
<title>Timer test</title>
</head>
<body>
<div id="time">
    <div><span id="hour"></span>:<span id="minute"></span>:<span id="seconds"></span></div>

    <button id="start-btn">Start</button>
    <button id="stop-btn">Pause</button>
    <button id="reset-btn">Reset</button>

    </div>
    <script type="text/javascript">
      let hour = 0;
      let minute = 0;
      let seconds = 0;
      let pauseTime = null;
      let start = [...document.cookie.matchAll(/([^;=]+)=([^;=]+)(;|$)/g)].filter(x => x[1].trim() == 'timer').map(x => Number(x[2].trim()))[0];
      if(start != null) {
         if(start > 0) start = new Date(start);
         else if(start < 0) { 
           pauseTime = -start;
           start = new Date(Date.now() + start); //+- = -
         } else start = null;
      } else start = null;
      let intervalId = null;


      function startTimer() {
        let totalSeconds;
        if(pauseTime) {
           start = new Date(Date.now() - pauseTime);
           totalSeconds = pauseTime;
           return;
        } else {
           totalSeconds = Math.floor((Date.now() - start.getTime()) / 1000);
        }
        hour = Math.floor(totalSeconds /3600);
        minute = Math.floor((totalSeconds - hour*3600)/60);
        seconds = totalSeconds - (hour*3600 + minute*60);

        document.getElementById("hour").innerHTML =hour;
        document.getElementById("minute").innerHTML =minute;
        document.getElementById("seconds").innerHTML =seconds;
      }
      if(start) intervalId = setInterval(startTimer, 1000);

      document.getElementById('start-btn').addEventListener('click', () => {
         if(pauseTime) {
            pauseTime = null;
         } else {
           if(start) return;
           start = new Date();
           intervalId = setInterval(startTimer, 1000);
         }
         document.cookie = "timer=" + String(start.getTime());
      })

      document.getElementById('stop-btn').addEventListener('click', () => {
        pauseTime = Date.now() - start.getTime();
        document.cookie = "timer=" + String(-pauseTime);
      });


      document.getElementById('reset-btn').addEventListener('click', () => {
         start = null;
         document.cookie = "timer=null";
         if(intervalId) clearInterval(intervalId);
         document.getElementById("hour").innerHTML = '0';
         document.getElementById("minute").innerHTML = '0';
         document.getElementById("seconds").innerHTML = '0';
      });

      </script>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...