JavaScript Time

home >> JavaScript Time

 

 

JavaScript Time

Simple JavaScript Time library with stop-watch and backward-clock...

Help Info

The library is extremely simple and the code (one single js file) is well documented. And it comes with an example (just take a look on the test.html file). Still, below are two examples:

Donate
credit cards and PayPal accepted

How to use the countdown (backWatch) class:

  /* create backWatch object */
  var stopWatch = new jtl.stopWatch(); 
  var backWatch = new jtl.backWatch(); 

  /* start backward counting on "start" button pressed */
  function startB(){
	if(backWatch.startHMS(0,0,5)!=null){
		backWatch.executeOnRefresh(refreshCounter); //function to execute on refresh
		backWatch.executeOnEnd(now1); //function to execute on end
		var value= backWatch.splittime();
		$('#backtimer').find('.value').text(toTime(value));	   
	}
  }

  /* stop the backward clock */
  function stopB(){
  var value= backWatch.stoptime();
  if(value==null)return; //no time returned, timer not started?
  $('#backtimer').find('.value').text(toTime(value)); 
  }   
/* refresh backward clock value */ function refreshCounter(){ value= backWatch.splittime(); if (value!=null) $('#backtimer').find('.value').text(toTime(value)); }

 

 

To use the stopWatch "class":

/* create stopWatch object */
var stopWatch = new jtl.stopWatch(); ... /* exec on "start" button clicked: */
function start(){
if(stopWatch.start()!=null){
stopWatch.executeOnRefresh(refresh); //callback function on refresh
var value= stopWatch.splittime();
$('#timer').find('.value').text(toTime(value));
$('#split_times').html('');
}
} /* execute when "stop" is clicked */ function stop(){ var value= stopWatch.stoptime(); if(value==null)return; //no time returned, timer not started? $('#timer').find('.value').text(toTime(value)); var curr=$('#split_times').html(); $('#split_times').html(curr+'
'+toTime(value)); } /* ... */ function refresh(){ //change the clock... }

 

In the examples above, toTime() function is used. This is just your way to convert the values, returned from the timers into something useful for your opage. See this example:

function toTime(_time){
if(_time==null)return ''; if(_time.negative)return ('-'+_time.hh+':'+_time.mm+':'+_time.ss+':'+_time.ms); return (_time.hh+':'+_time.mm+':'+_time.ss+':'+_time.ms);
}

 

 

You'll see above that we receive the time in specific structure (and need to convert it to string when needed).

The toTime() function above, for example, converts the "time" object, returned from stopWatch and backWatch functions into "HH:MM:SS:MS" but you'll probably want to send the data to some separate span or div objects, or why not draw analog clock according to the data received...

 

The time structure looks like this:
time.hh hours
time.mm minutes
time.ss seconds
time.ms milliseconds
time.negative if this flag is true, the countdown time passed and we are counting the time passed since the 0 was reached

 

Note that the sample code above is meant to work in desktop / laptop browsers. For mobile devices (and touch-screen usage) you must use tapstart event handlers to get the fastest response (otherwise you'll get unwanted delay between touching the button and the start/stop action)