javascript - 一个不会在刷新时重置的计时器

Question

编辑:调用 Clock.start() 时如何传递参数以便更改 totalSeconds 的值？

我得到了一个计数器，我将其值与计时器显示的 ID 连接起来，因为页面上会有多行计时器，但每个用户只会运行一个。我想传递计时器的值，这样我就知道我应该获取的计时器在哪一行，然后我将其转换为秒，最后我可以将该值分配给 totalSeconds。然后也许我可以按照我想象的方式让它工作。

我已经在运行的东西:我有一个计时器，除非我刷新，否则它不会显示它正在计数。当页面加载时，PHP 查询 mySQL 并使用 TIMEDIFF(now(), time_log) 计算耗时，其中 time_log 是计时器开始的时间。

我想补充的内容:我想做的是使用下面的 js/jquery 片段获取我的 TIMEDIFF，然后将其用作 totalSeconds，因此 totalSeconds 不会重置并继续从 TIMEDIFF 值开始计数。

var Clock = 
{
    totalSeconds: 0,

    start: function () {
        var self = this;

        this.interval = setInterval(function () {
          self.totalSeconds += 1;

          var ctr;
          $(".icon-play").each(function(){
              if( $(this).parent().hasClass('hide') )
                  ctr = ($(this).attr('id')).split('_');
          });

          $("#hour_" + ctr[1]).text(pad(Math.floor(self.totalSeconds/3600)));
          $("#min_" + ctr[1]).text(pad( Math.floor((self.totalSeconds/60)%60) ));
          $("#sec_" + ctr[1]).text(pad(parseInt(self.totalSeconds%60)));
        }, 1000);
    },

    pause: function () {
      clearInterval(this.interval);
      delete this.interval;
    },

    resume: function () {
      if (this.interval) this.start();
    }
};

此脚本归功于 Speransky Danil 先生。 how do I pause and resume a timer?

Answer 1

您不应记录总秒数，而应记录开始时间并计算从现在到开始计时之间的秒数。

此外，您已经将开始时间存储在数据库中，因此您可以在页面加载时从中进行初始化。

如果您只计算秒数，您将浪费页面刷新之间的时间。

编辑:您可以在 PHP 生成的 HTML 输出中初始化 Clock.totalSeconds。我知道你已经有这个时钟 JS 工作了(上面没有发布标记)。

<script type="text/javascript">
var Clock = {}; // your code above
Clock.totalSeconds = <?php echo (int)$seconds; ?>;
</script>