我想單擊一次按鈕，每當我刷新頁面時，計時器仍會繼續計數

Question

當我單擊“開始”按鈕時，它將開始向上計數，但是當我刷新頁面或重新啟動瀏覽器時，它將停止計數，當我再次單擊“開始”按鈕時，它將繼續計數。 我希望它只單擊開始按鈕一次並開始計數，每當我刷新頁面或重新啟動瀏覽器時，它仍將繼續計數，直到我想停止它為止。

這是我的代碼...

 <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>

Answer 1

它需要重寫代碼的幾個部分。 但是這樣做的方法是使用例如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();
      }
    });

我想單擊一次按鈕，每當我刷新頁面時，計時器仍會繼續計數

問題描述

1 個解決方案

解決方案1
0 2020-03-06 08:24:49

我想單擊一次按鈕，每當我刷新頁面時，計時器仍會繼續計數

問題描述

1 個解決方案

解決方案1 0 2020-03-06 08:24:49

解決方案1
0 2020-03-06 08:24:49