在多個頁面上倒數計時器

Question

我在主頁上有一個計時器。 當用戶進行任何操作（例如鼠標移動）時，計時器將被重置。 當計時器倒計時至05:00時，系統將彈出一個警報，單擊“確定”以重置計時器。 如果5分鍾內未執行任何操作，並且計時器倒計時至00:00，則用戶被迫注銷。 我的問題是此計時器只能在一頁內工作，如果我打開了兩頁，則計時器只能在焦點頁面上重置。 由於頁面不集中，我仍將退出。

誰可以幫我這個事？ 非常感謝！

<script type="text/javascript">
  var flag = false;
  startTimer();
  function startTimer() {
    var presentTime = $("#Status").text().toString();
    var timeArray = presentTime.split(":");
    var m = timeArray[0];
    var s = checkSecond((timeArray[1] - 1));
    if(s==59) {
      m=m-1;
      if(m < 10) {
        m = "0" + m;
      }
    }

    if (m==05 && s==00) {
      flag = true;
      BootstrapDialog.alert("You have 5 minutes remaining in your session. Click \"OK\" to extend the session.", function() {
        flag = false;
        resetTimer();
      });
    }

    if(!flag) {
      //Reset timer upon user action
      document.onload = resetTimer;
      document.onmousemove = resetTimer;
      document.onmousedown = resetTimer;
      document.ontouchstart = resetTimer;
      document.onclick = resetTimer;
      document.onscroll = resetTimer;
      document.onkeydown = resetTimer;
    }
    else {
      document.onload = null;
      document.onmousemove = null;
      document.onmousedown = null;
      document.ontouchstart = null;
      document.onclick = null;
      document.onscroll = null;
      document.onkeydown = null;
    }

    if (m==0 && s==00) {
      window.location.replace("/Logout");
    };

    setTimeout(startTimer, 1000);
  }

  function checkSecond(sec) {
    if (sec < 10 && sec >= 0) {sec = "0" + sec};
    if (sec < 0) {sec = "59"};
    return sec;
  }

  function resetTimer() {
    $("#Status").html("30:00");
  }
</script>

<div> Your session has <h5 id="Status">30:00</h5> remaining. </div>

Answer 1

您的問題是您想通過1個腳本控制兩個頁面，但是每個頁面中的變量都是獨立的。

如果您解決此問題，則可以控制您的頁面。

您可以從Cookie或localstorage獲取變量m和s。 如果cookie和localstorage的各個頁面位於同一根目錄中，則它們可以在不同的頁面中訪問。

嘗試一下，只需替換變量即可。從Cookie或本地存儲中獲取和設置它