EDIT: How could I pass a parameter when I call Clock.start() so I could change the value of totalSeconds?

I got a counter which value I concatenate with the ID of the timer display since there would be multiple lines of timers on the page but only one would be running for every user. I want to pass the value of the timer so i know which line the timer that I should fetch is on and then I'd convert that to seconds and then finally I could assign that value to totalSeconds. Then maybe I can get this working the way I pictured every thing.

WHAT I ALREADY HAVE RUNNING: I have a timer that doesn't show that it's counting up unless I refresh. When the page loads PHP queries mySQL and calculates the elapsed time with TIMEDIFF(now(), time_log), where time_log is when the timer started.

WHAT I'D LIKE TO ADD: What I want to do is use the js/jquery snippet below to get the my TIMEDIFF and then use that as totalSeconds, so totalSeconds wont reset and continue counting up from the TIMEDIFF value.

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();
    }
};

For this script, credits to Mr. Speransky Danil. how do I pause and resume a timer?

EDIT: How could I pass a parameter when I call Clock.start() so I could change the value of totalSeconds?

I got a counter which value I concatenate with the ID of the timer display since there would be multiple lines of timers on the page but only one would be running for every user. I want to pass the value of the timer so i know which line the timer that I should fetch is on and then I'd convert that to seconds and then finally I could assign that value to totalSeconds. Then maybe I can get this working the way I pictured every thing.

WHAT I ALREADY HAVE RUNNING: I have a timer that doesn't show that it's counting up unless I refresh. When the page loads PHP queries mySQL and calculates the elapsed time with TIMEDIFF(now(), time_log), where time_log is when the timer started.

WHAT I'D LIKE TO ADD: What I want to do is use the js/jquery snippet below to get the my TIMEDIFF and then use that as totalSeconds, so totalSeconds wont reset and continue counting up from the TIMEDIFF value.

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();
    }
};

For this script, credits to Mr. Speransky Danil. how do I pause and resume a timer?

• javascript
• jquery
• timer

Share Improve this question Follow edited May 23, 2017 at 12:27 CommunityBot 111 silver badge asked Sep 24, 2012 at 1:14 esandrkwnesandrkwn 39911 gold badge66 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Instead of recording total seconds, you should instead record the start time and calculate the number of seconds between now and when you started the timer.

Additionally, you are already storing your start time in the database, so you could initialize from that when the page loads.

If you simply count seconds, you will loose time between page refreshes.

EDIT: You can init the Clock.totalSeconds in you HTML output generated by PHP. I understand you already have this clock JS working (with markup not posted above).

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

IF you can target modern browsers, save the totalSeconds in localStorage.
You can read totalSeconds back out of localStorage

If you have to target older browsers, then using cookies to save the value is your best shot. I'd set the cookie date so it expired fairly soon.