Question

我正在构建一个为每个用户分配任务的站点，他/她需要在固定的持续时间内完成任务。因此需要跟踪每项任务所花费的时间。我还需要跟踪用户是否在网站上闲置。

现在我可以使用此代码执行此操作：

HTML

 <a class="btn btn-success btn-lg" id="startTracking" role="button">Start Tracking</a>
    <a class="btn btn-danger btn-lg" id="endTracking" role="button">Stop Tracking</a>
    <h2 id="testingSince"></h2>

JAVASCRIPT

<script type="text/JavaScript">
  var totalSeconds = 0;
  var idleSeconds = 0;
  $(document).ready(function () {
    $('body').on('click','#startTracking',function(){
      //Increment the idle time counter every minute.
      var idleInterval = setInterval(timerIncrement, 1000); // 1 second
    });

    //Zero the idle timer on mouse movement.
    $(this).mousemove(function (e) {
      idleSeconds = 0;
    });
    $(this).keypress(function (e) {
      idleSeconds = 0;
    });
  });

  function timerIncrement() {
    totalSeconds += 1;
    idleSeconds += 1 ;
    if (idleSeconds > 600) { // 20 minutes
      alert('You have been sitting Idle for 10 Minutes');
    }

    $('#testingSince').text(timeStringfromSeconds(totalSeconds));
  }

  function timeStringfromSeconds(totalSeconds){
      var hours = Math.floor(totalSeconds / 36e2),
      mins = Math.floor((totalSeconds % 36e2) / 60),
      secs = Math.floor((totalSeconds % 60));
      return ("0" + hours).slice(-2)+':'+("0" + mins).slice(-2)+':'+("0" + secs).slice(-2);
  }

 </script>

所以这段代码效果很好，用户可以看到自点击按钮后花费的时间。它还跟踪用户空闲时间并在10分钟后发出警报。

然而，这里唯一的问题是，当页面重新加载时，计数器从0开始，即2行：

var totalSeconds = 0;
var idleSeconds = 0;

我只是希望定时器计数器不重启并从之前的值继续。

这样做的一种方法是使用Cookie。所以我必须每秒更新一次，但我不确定这是不是一个好主意。

如果有其他方法或我需要使用浏览器Cookie，请告诉我？

Answer 1

许多用户不允许在其计算机上使用Cookie。你永远不应该只依赖cookie。也许你应该创建一些脚本，你可以每隔一两秒或五次调用一次，并在会话中存储已用的时间。

跟踪任务所需的总时间

1 个答案: