Я хочу нажать кнопку ОДИН РАЗ, и всякий раз, когда я обновляю sh страницу, таймер все равно будет продолжать отсчитывать - PullRequest
Новая
       11

Я хочу нажать кнопку ОДИН РАЗ, и всякий раз, когда я обновляю sh страницу, таймер все равно будет продолжать отсчитывать

1 голос
/ 06 марта 2020

Когда я нажимаю кнопку «Пуск», она начинает отсчет, НО, когда я обновляю sh страницу или перезагружаю браузер, он перестает считать, и когда я снова нажимаю кнопку «Пуск», он продолжает считать. Я хочу, чтобы он нажал кнопку «Пуск» только ОДИН РАЗ и начал считать, и всякий раз, когда я обновляю страницу sh или перезагружаю браузер, он продолжает подсчитывать, пока я не захочу остановить ее.

Вот мой код ... 

<script>
  const pad = (num) => ("0" + num).slice(-2);

  $(document).ready(function() {

    $("#StartButton").click(function(){
    var savedDate = +localStorage.getItem("date"), date = new Date();

    console.log(savedDate)
    if (savedDate && !isNaN(savedDate)) date = new Date(savedDate);

    else date.setHours(0, 0, 0, 0);


    var hours = date.getHours(),
    minutes = date.getMinutes(),
    seconds = date.getSeconds(),
    $span = $('#countup');

    var timer = setInterval(function() {
    var day = date.getDate();
    date.setSeconds(date.getSeconds()+1);

    if (day != date.getDate()) {
      alert("You're logged-in for 24 hours.");
      clearInterval(timer);
      localStorage.removeItem("date");
    }
      else {
        $span.text(
          pad(date.getHours()) + ":" +
          pad(date.getMinutes()) + ":" +
          pad(date.getSeconds())
        );
        console.log(date)
        localStorage.setItem("date",date.getTime())
      }
    }, 1000);
     }); 


     $("#StopButton").click(function(){
      alert("Stop..");
        clearInterval(timer);
        localStorage.removeItem("date");
      });
  });
</script>
<!DOCTYPE html>
<html>
  <head>
    <title>Countup persistently</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <span id="countup">00:00:00</span>
    <button type="button" id="StartButton">Start</button>
    <button type="button" id="StopButton">Stop</button>
  </body>
</html>

1 Ответ

0 голосов
/ 06 марта 2020

Потребуется переписать несколько частей вашего кода. Но способ сделать это - сохранить состояние счетчика на клиенте, используя, например, window.localStorage .

. Что бы вы сделали: * на загрузка страницы считывает флаг для localStorage *, если флаг установлен, начинаем считать * при нажатии переключить этот флаг и сохранить его в localStorage 

    const pad = num => ("0" + num).slice(-2);
    const savedDate = localStorage.getItem("date");
    let timer;

    function start() {
      let date = new Date();
      console.log(savedDate);

      if (savedDate) {
        date = new Date(savedDate);
      } else {
        date.setHours(0, 0, 0, 0);
      }

      localStorage.setItem("date", date);

      let $span = $("#countup");

      timer = setInterval(function() {
        let day = date.getDate();
        date.setSeconds(date.getSeconds() + 1);

        if (day !== date.getDate()) {
          alert("You're logged-in for 24 hours.");
          clearInterval(timer);
          localStorage.removeItem("date");
        } else {
          $span.text(
            pad(date.getHours()) +
              ":" +
              pad(date.getMinutes()) +
              ":" +
              pad(date.getSeconds())
          );
          console.log(date);
          localStorage.setItem("date", date);
        }
      }, 1000);
    }

    function stop() {
      alert("Stop..");
      clearInterval(timer);
      localStorage.removeItem("date");
    }

    $(document).ready(function() {
      $("#StartButton").click(start);
      $("#StopButton").click(stop);

      if (savedDate) {
        start();
      }
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...