Как заставить js таймер не перезагружаться при перезагрузке страницы? - PullRequest
Новая
       76

Как заставить js таймер не перезагружаться при перезагрузке страницы?

0 голосов
/ 29 апреля 2020

Я сделал (на самом деле скопировал и сделал некоторые изменения) таймер javascript, но я не знаю, как это сделать, если я обновлю sh страницу, на которой счетчик таймера рассчитывает ...

Вы можете найти код здесь: 

var ms = 0, s = 0, m = 60;
                var timer;

                var stopwatchEl = document.querySelector('.stopwatch');
                var lapsContainer = document.querySelector('.laps');

                function start() {
                    if (!timer) {
                        timer = setInterval(run, 10);
                    }
                }

                function run() {
                    stopwatchEl.textContent = (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
                    ms--;
                    if (ms < 0) {
                        ms = 99;
                        s--;
                    }
                    if (s < 0) {
                        s = 59;
                        m--;
                    }
                    if(m==0 && s==0 && ms==0) {
                        pause();
                        var figyelmeztetes = confirm("Lejárt az idő!");
                    }
                    stopwatchEl.textContent = (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
                }

                function pause() {
                    clearInterval(timer);
                    timer = false;
                }

                function stop() {
                    var figyelmeztetes = confirm("Vigyázz!!! Ezzel a számláló visszaáll 60 percre!");
                    if(figyelmeztetes == true) {
                        clearInterval(timer);
                        timer = false;
                        ms = 0;
                        s = 0;
                        m = 60;
                        stopwatchEl.textContent = (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
                    }
                }
.controls {
 	display: flex;
 }
<div class="controls">
                <div onclick="start()">Start</div>
                <div onclick="pause()">Pause</div>
                <div onclick="stop()">Restart</div>
            </div>
            <div class="stopwatch">60:00:00</div>

Есть ли простой способ сделать то, что я ищу?

Спасибо за вашу помощь!

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Вы можете установить значение времени до того, как окно будет развернуто в локальном хранилище, как это 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="controls">
      <button onclick="start()">Start</button>
      <button onclick="pause()">Pause</button>
      <button onclick="stop()">Restart</button>
    </div>
    <div class="stopwatch">60:00:00</div>


  </body>
</html>

     var ms = 0,
        s = 0,
        m = 60;
      var isCountingDown = false;
      var timer;

      window.addEventListener("load", function () {
        if (window.localStorage.getItem("time") !== null) {
          let obj = JSON.parse(window.localStorage.getItem("time"));
          s = obj["s"];
          ms = obj["ms"];
          m = obj["m"];

          stopwatchEl.textContent = `${m}:${s}:${ms}`;
          start();
        }
      });

      window.addEventListener("beforeunload", function () {
        if (isCountingDown == true) {
          pause();
          let obj = {
            ms: ms,
            s: s,
            m: m,
          };
          window.localStorage.setItem("time", JSON.stringify(obj));
        }
      });

      var stopwatchEl = document.querySelector(".stopwatch");
      var lapsContainer = document.querySelector(".laps");

      function start() {
        if (!timer) {
          isCountingDown = true;
          timer = setInterval(run, 10);
        }
      }

      function run() {
        stopwatchEl.textContent =
          (m < 10 ? "0" + m : m) +
          ":" +
          (s < 10 ? "0" + s : s) +
          ":" +
          (ms < 10 ? "0" + ms : ms);
        ms--;
        if (ms < 0) {
          ms = 99;
          s--;
        }
        if (s < 0) {
          s = 59;
          m--;
        }
        if (m == 0 && s == 0 && ms == 0) {
          pause();
          var figyelmeztetes = confirm("Lejárt az idő!");
        }
        stopwatchEl.textContent =
          (m < 10 ? "0" + m : m) +
          ":" +
          (s < 10 ? "0" + s : s) +
          ":" +
          (ms < 10 ? "0" + ms : ms);
      }

      function pause() {
        clearInterval(timer);
        timer = false;
      }

      function stop() {
        var figyelmeztetes = confirm(
          "Vigyázz!!! Ezzel a számláló visszaáll 60 percre!"
        );
        if (figyelmeztetes == true) {
          clearInterval(timer);
          timer = false;
          ms = 0;
          s = 0;
          m = 60;
          stopwatchEl.textContent =
            (m < 10 ? "0" + m : m) +
            ":" +
            (s < 10 ? "0" + s : s) +
            ":" +
            (ms < 10 ? "0" + ms : ms);
        }
      }
1 голос
/ 29 апреля 2020

Вы можете попытаться сохранить оставшееся время в localStorage и сослаться на это при загрузке страницы

...