在多个页面上倒数计时器

时间:2018-09-18 06:53:54

标签: javascript php timer dom-events

我在主页上有一个计时器。当用户进行任何操作(例如鼠标移动)时,计时器将被重置。当计时器倒计时至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>

1 个答案:

答案 0 :(得分:0)

您的问题是您想通过1个脚本控制两个页面,但是每个页面中的变量都是独立的。

如果您解决了此问题,则可以控制您的页面。

您可以从cookie或localstorage中获取变量m和s。如果这些页面位于同一根目录中,则可以在不同页面中访问cookie和localstorage中的变量。

尝试一下,只需替换变量即可。从Cookie或本地存储中获取&&设置