不会在刷新时重置的计时器答案

【问题标题】：A timer that won't reset on refresh不会在刷新时重置的计时器
【发布时间】：2012-09-24 01:14:09
【问题描述】：

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

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

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

我想添加的内容：我想要做的是使用下面的 js/jquery sn-p 来获取我的 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?

【问题讨论】：

标签： javascript jquery timer

【解决方案1】：

与其记录总秒数，不如记录开始时间并计算从现在到开始计时器的秒数。

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

如果你只计算秒数，你会在页面刷新之间失去时间。

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

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

【讨论】：

好点。不知道页面刷新时间如何没有注册给我。也许我太习惯在本地服务器上工作了。
是的，我确实将这些值存储到了我的数据库中，我可以很好地获取这些值，但我希望我的计时器实际上每秒移动一次，这就是我想要使用这个 sn-p 的原因。
我更新了我的答案。只需使用您的数据库信息而不是 cookie 作为您的开始时间。
这正是我现在已经开始运行的。刷新时，计时器根本不会重置，它会增加，但我的问题是它不会改变，因为它只是 PHP。这就是为什么我想添加一个 javascript/jquery 端以便计时器移动的原因。对于移动，我的意思是 00:00:seconds 部分每秒都在变化。当我提到“计时器重置为零”时，我的意思是上面的 js sn-p。我想获取 PHP 值并将其作为 totalSeconds 的值。我希望我已经说得够清楚了吗？解释起来有点棘手。 :)
不知何故，我终于让它工作了。非常感谢您扩展了我对对象的理解，如果只是一点点，我仍在努力。在您发布之前，我不知道如何设置 Clock.totalSeconds 及其限制。谢谢。

【解决方案2】：

如果您可以定位现代浏览器，请将totalSeconds 保存在localStorage 中。
你可以从localStorage 读回totalSeconds

如果您必须针对较旧的浏览器，那么使用 cookie 来保存值是您的最佳选择。我会设置 cookie 的日期，所以它很快就会过期。

【讨论】：

我不能使用 cookie，因为这个计时器会有多个实例。每个用户一个实例。他们可以登录和退出并且计时器必须继续计数，因此我存储了这些值并从数据库中获取这些值。我所需要的只是一种让计时器每增加一秒就移动一次的方法。
然后将您的开始时间存储在sessionStorage。这是每个窗口唯一的。 developer.mozilla.org/en-US/docs/DOM/Storage
如果我这样做，我的计时器会移动吗？就像我在评论中所说的那样，感谢 TIMEDIFF，我在获取时间方面没有问题。