Need help reversing a countdown timer

[schwim]

Hi there all!

I am trying to script a time tracking script so I can keep track of my work for people. I found this nice countdown clock but it’s a count down timer and I want a count… up? timer where it starts at 0 0 0 0 and when I click start, it starts keeping track of the time. An example of the clock can be found here(click the tracker tab on the page body to see the countdown).

Here’s the javascript where the magic happens:

var target_date = new Date().getTime() + (1000*3600*48); // set the countdown date
var days, hours, minutes, seconds; // variables for time units

var countdown = document.getElementById("tiles"); // get tag element

getCountdown();

setInterval(function () { getCountdown(); }, 1000);

function getCountdown(){

	// find the amount of "seconds" between now and target
	var current_date = new Date().getTime();
	var seconds_left = (target_date - current_date) / 1000;

	days = pad( parseInt(seconds_left / 86400) );
	seconds_left = seconds_left % 86400;
		 
	hours = pad( parseInt(seconds_left / 3600) );
	seconds_left = seconds_left % 3600;
		  
	minutes = pad( parseInt(seconds_left / 60) );
	seconds = pad( parseInt( seconds_left % 60 ) );

	// format countdown string + set tag value
	countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>"; 
}

function pad(n) {
	return (n < 10 ? '0' : '') + n;
}

[schwim]

I think I managed to alter this count up snippet to work: I gotta let it run a while to make sure nothing silly happens.

var hours, minutes, seconds; // variables for time units
var timer = document.getElementById("tiles"); // get tag element
var totalSeconds = 0;
setInterval(setTime, 1000);

function setTime() {
	++totalSeconds;
	seconds = pad(totalSeconds % 60);
	minutes = pad(parseInt(totalSeconds / 60));
	hours = pad(parseInt(totalSeconds / 3600));

	// format timer string + set tag value
	timer.innerHTML = "<span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>"; 
  
}

function pad(val) {
  var valString = val + "";
  if (valString.length < 2) {
    return "0" + valString;
  } else {
    return valString;
  }
}

[coothead]

Hi there schwim,

Check out the attachment which contains
a responsive example of the countUP.

schwim.zip (2.7 KB)

coothead

[schwim]

This is incredible, thanks so much! I’m wondering if one two things could be added/changed to it. First, Could the start/stop button be changed to keep the time on the clock when stopping instead of resetting it to zero when pressed? I’d like to be able to “pause” the time so my bathroom and WoW breaks don’t get billed

Secondly, a reset button that would stop it if it were running and set it back to zero regardless of running state would be nifty as well.

Are either of these features possible with this particular script?

[coothead]

@schwim

Are either of these features possible with this particular script?

Check out the attachment to find out.

schwim-ver2.zip (3.5 KB)

coothead

[benanamen]

You can save yourself the trouble and use https://www.getharvest.com/
I have been using it for years. Clean interface with timed billing and invoicing.

[schwim]

Hi there again, You’ve made such a great script. I’ve modified it just a tad since I realized I didn’t need the days, so cut it down to secs/mins/hours and I seem not to have broken it.

As I worked I realized that I need to be able to continue a timer while the page is closed and I need it to default to running on page load if a timer is to be continued. I see how to have it start with a particular seconds value but I just can’t find out how to have the timer and start/stop default to running on page load. I’ve tried changing the flag entries throughout from false ~> true and vice versa but on each page load, it isn’t running, no matter what I try. Could you tell me what I would need to change in the js to have it in a running state when I need it? Here’s the current js:

  (function(d) {
    'use strict';
   var seconds = 0, si, h0, m0, s0, flag = true;

   var timer = d.getElementById( 'tiles' ),
       start = d.getElementById( 'start' ),
       reset = d.getElementById( 'reset' );

   timer.innerHTML = '<span>00</span><span>00</span><span>00</span>';

   start.addEventListener('click', 
     function() {
         if ( flag === true ) {
           seconds ++;
           si = setInterval(  
             function(){
              h0 = pad( parseInt( seconds / 3600 ) );
              m0 = pad( parseInt( seconds / 60 % 60 ) );
              s0 = pad( seconds % 60 );
	          timer.innerHTML = '<span>' + h0 + '</span><span>' + m0 + '</span><span>' + s0 + '</span>';
              seconds ++;
         }, 1000 );
              start.textContent = 'stop';
              flag = false;
             }
         else {
              clearInterval(si);
              start.textContent = 'start'; 
              flag = true;
       }}, false );

   reset.addEventListener('click', 
     function() {
          clearInterval( si );
          start.textContent = 'start'; 
          flag = true;
          timer.innerHTML = '<span>00</span><span>00</span><span>00</span>';
          seconds = 0;
       }, false );

   function pad( n ) {
	 return ( n < 10 ? '0' : '' ) + n;
    }
  }(document));

[coothead]

@schwim

I need to be able to continue a timer while the page is closed

Try localStorage.setItem(…) and localStorage.getItem(.), perhaps.

schwim-ver3.zip (2.7 KB)

coothead

[schwim]

Thanks coothead, I’ll work with that. If I wanted to have the state of the timer and start/stop button set to running on page load, what would I change in the js to make that happen?

EDIT: I think the reason I’m not getting it right is because the function is waiting on "start.addEventListener(‘click’, " to start off. I’ve been changing the flag but I bet that doesn’t matter at all if that click doesn’t occur.

[coothead]

Hi there schwim,

maybe this latest modification…

schwim-ver4.zip (2.8 KB)

…will hit the sweet spot.

coothead

[schwim]

Thanks, is it this that I need to work with to get it to run on pageload? I’m trying some different things but I’m not figuring out how to get it going:

   w.addEventListener('load', timer, false );
   start.addEventListener('click', timer, false );

[coothead]

Hi there schwim,

version 4 runs on page load for me, does it not for you?

coothead

[schwim]

I’m messing something up when moving it into my template. I also need to figure out what I would change in the script via PHP so I can control whether it starts at page load or not.

Here’s my attempt at integrating it(click on the tracker tab to see the counter): http://schw.im/timer.html

[coothead]

Hi there schwim,

your page, it appears, uses “BootStrap”.

I am sorry but, as a bespoke coder, I really do not want to
get involved with the integration of code into frameworks
generally, and “BootStrap” in particular.

coothead

[schwim]

@coothead

I am sorry but, as a bespoke coder, I really do not want to
get involved with the integration of code into frameworks
generally, and “BootS

I read you loud and clear. Instead of helping me with integration, can you tell me what I would need to change in the script to toggle between whether it starts on page load or not? If my PHP script knows that a timer is running, I’d like to be able to change a flag in the script needs to run on page load and if there’s no running tracker, it does not.

[schwim]

Resolved the issue of starting on page load by finding some JS to emulate a click over on SE.

Thanks for everything!

[coothead]

@schwim

Resolved the issue of starting on page load by
finding some JS to emulate a click over on SE.

Are you entirely happy with that?

My method would be choose on load or not.

schwim-ver-5.zip (2.9 KB)

coothead