如何使时间计数器即使刷新或离开页面也会继续答案

【问题标题】：How to make time counter will continue even refresh or leave the page如何使时间计数器即使刷新或离开页面也会继续
【发布时间】：2017-08-22 05:36:05
【问题描述】：

我在我的考试页面上实现了计时器计数。就像edmodo website 一样。但是当你在 edmodo 中考试时，即使你刷新它，计时器仍然在计时。在我的网站上，如果您刷新页面，计时器也会刷新。我想要的就像 edmodo 一样，即使您刷新页面，它仍然计数。请参阅我的代码供您参考。

注意： 我正在使用 Laravel5.1/jQuery

$(document).ready(function() {

  // Quiz timer (Start of Quiz)
  var quiz_timer = $('.quiz-timer').html();
  var exact_time = parseInt($('.timer-value').html() - 1);

  var hrs_to_spend = parseInt(exact_time / 60);
  var mins_to_spend = parseInt(exact_time % 60);
  var secs_to_spend = 60;

  var timeIsUp = false;
  var secs = 0,
    mins = 0,
    hrs = 0;
  var secs_zero, mins_zero, hrs_zero, h_spend_zero, m_spend_zero, s_spend_zero;

  var setters = setInterval(function() {

    if ($('.quiz-timer').html() != '00:00:01') {
      if (secs_to_spend > 0) {
        secs_to_spend--;
      }

      if (secs_to_spend <= 0) {
        mins_to_spend--;
        secs_to_spend = 59;
      }

      if (mins_to_spend < 0) {
        hrs_to_spend--;
        mins_to_spend = 59;
      }
    } else {
      $('.quiz-timer').html('00:00:00')
      clearInterval(setters);
      $('.answer-quiz > .panel-info').attr('class', 'panel panel-danger');
      swal({
        title: "Oops!",
        text: "Time is up.",
        type: "warning"
      });

      timeIsUp = true;
      setTimeout(function() {
        $('#submitAttempt').click();
      }, 2000);
      return false;
    }

    h_spend_zero = (hrs_to_spend < 10) ? '0' : '';
    m_spend_zero = (mins_to_spend < 10) ? '0' : '';
    s_spend_zero = (secs_to_spend < 10) ? '0' : '';

    $('.quiz-timer').html(h_spend_zero + hrs_to_spend + ':' + m_spend_zero + mins_to_spend + ':' + s_spend_zero + secs_to_spend);

    if (!timeIsUp) {
      secs++;
      if (secs == 60) {
        mins++;
        secs = 0;
      }

      if (mins == 60) {
        hrs++;
        mins = 0;
      }

      hrs_zero = (hrs < 10) ? '0' : '';
      mins_zero = (mins < 10) ? '0' : '';
      secs_zero = (secs < 10) ? '0' : '';

      $('#timeTaken').val(hrs_zero + hrs + ':' + mins_zero + mins + ':' + secs_zero + secs);
    }

  }, 1000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Original Value: <span class="timer-value">110</span><br><br>
Timer: <span class="quiz-timer"></span><br>
Time Spent: <input type="text" name="time_taken" id="timeTaken" value="">

【问题讨论】：

试试 cookie 或 localStorage

标签： javascript jquery laravel-5 counter

【解决方案1】：

将时间到期期限设置为日期时间。计算剩余时间，而不是花费时间。

例如，如果现在的日期时间是“2017-08-22 08:00:01”（考试的开始时间），并且您希望在 1 小时后到期，请将日期时间截止日期设置为“2017 -08-22 09:00:01”（这应该从服务器返回）。然后让 javascript 计数器以每秒刷新率（间隔）重新计算现在时间和截止日期之间的时间差。

【讨论】：

【解决方案2】：

使用本地存储

1) 将最后一次保存在本地存储中喜欢

window.onbeforeunload= function(){ localStorage.setItem("lastTime", timevalue); }

2) 重新加载时，如果本地存储中存在时间，例如

savedTime = localStorage.getItem("lastTime");

mytimer.continueFrom(savedTime)

从那个点拿起它并继续计时器

在这里查看有关本地存储的信息 Local Storage

【讨论】：

如果其他人在同一台电脑上登录我的站点进行相同的考试怎么办？考试有可能继续进行。
您需要在会话开始或结束时重置计时器。一旦考试在时间之前完成并且用户注销，则计时器应重置为 0:0:0，当新用户到来时，他登录然后启动计时器，然后如果他重新加载，则再次使用本地存储中的数据。跨度>

【解决方案3】：

Javascript 无法实现这一点，javascript 代码具有会话生命周期，如果您关闭选项卡，它会终止该选项卡使用的所有资源，包括 javascript。

您可以尝试通过将计数器 + 当前时间保存在 local storage 中来克服这个问题，并且每当您启动 JS 代码时，检查本地存储中是否有这些值，并使用它们初始化计数器值。

let counter = prevSavedCounter + (new Date()).getTime() - savedTime;

【讨论】：