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

时间:2012-09-24 01:14:09

标签: javascript jquery timer

编辑:当我调用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?

2 个答案:

答案 0 :(得分:5)

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

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

如果只计算秒数,则会缩短页面刷新之间的时间。

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

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

答案 1 :(得分:1)

如果您可以定位现代浏览器,请将totalSeconds保存在localStorage中 您可以在totalSeconds

之后阅读localStorage

如果您必须定位旧浏览器,那么使用Cookie来保存价值是最好的选择。我设置了cookie日期,因此它很快就会过期。