Online jQuery Stopwatch

Sam Deering

jquery-stopwatch

Hi guys, I stumbled upon this online stopwatch developed using jQuery, it’s pretty cool. You can create laps and view a running total aswell which is pretty neat.

View Demo

Update: On closer inspection of the code It uses JavaScript and not much jQuery… still cool though. Maybe if I get time i’ll convert it into a jQuery plugin.

jQuery Code Used

<script type='text/javascript'>
// 0/1 = start/end
// 2 = state
// 3 = length, ms
// 4 = timer
// 5 = epoch
// 6 = disp el
// 7 = lap count

var t=[0, 0, 0, 0, 0, 0, 0, 1];

function ss() {
	t[t[2]]=(new Date()).valueOf();
	t[2]=1-t[2];

	if (0==t[2]) {
		clearInterval(t[4]);
		t[3]+=t[1]-t[0];
		var row=document.createElement('tr');
		var td=document.createElement('td');
		td.innerHTML=(t[7]++);
		row.appendChild(td);
		td=document.createElement('td');
		td.innerHTML=format(t[1]-t[0]);
		row.appendChild(td);
		td=document.createElement('td');
		td.innerHTML=format(t[3]);
		row.appendChild(td);
		document.getElementById('lap').appendChild(row);
		t[4]=t[1]=t[0]=0;
		disp();
	} else {
		t[4]=setInterval(disp, 43);
	}
}
function r() {
	if (t[2]) ss();
	t[4]=t[3]=t[2]=t[1]=t[0]=0;
	disp();
	document.getElementById('lap').innerHTML='';
	t[7]=1;
}

function disp() {
	if (t[2]) t[1]=(new Date()).valueOf();
	t[6].value=format(t[3]+t[1]-t[0]);
}
function format(ms) {
	// used to do a substr, but whoops, different browsers, different formats
	// so now, this ugly regex finds the time-of-day bit alone
	var d=new Date(ms+t[5]).toString()
		.replace(/.*([0-9][0-9]:[0-9][0-9]:[0-9][0-9]).*/, '$1');
	var x=String(ms%1000);
	while (x.length&lt;3) x='0'+x;
	d+='.'+x;
	return d;
}

function load() {
	t[5]=new Date(1970, 1, 1, 0, 0, 0, 0).valueOf();
	t[6]=document.getElementById('disp');

	disp();

	if (!window.opener &amp;&amp; window==window.top) {
		document.getElementById('remote').style.visibility='visible';
	}
}

function remote() {
	window.open(
		document.location, '_blank', 'width=700,height=350'
	);
	return false;
}
</script>

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.abcinterior.ru Alex

    Hi! If I need save final value in mysql base, how I can do this?

    • jquery4u

      @Alex – If you wanted to store the stop times in a mySQL database this could be achieved by binding an event to stop button that includes an AJAX call which passes the value to a PHP script server side that connects to the mySQL database and stores the value. Hope this helps. Sam

    • http://jquery4u.com/ jQuery4u

      Hi Alex, what exactly do you mean by “mysql base”. Do you mean storing it in a mysql database? This could simply be achieved by hooking up an event handler on the start/stop/pause buttons to send an ajax request with the time to store.
      Thanks,
      Sam

  • G

    How can I add a delay of 3 sec?

  • maurizio

    i have problems with jquery mobile.
    i need to refresh page for starting time. If i don’t do this, time stay at 0…

  • Guest888

    How to make this stopwatch start when the documen ready?

  • CubingWouter

    How do I make it work in my PHP-file? I’m really new to jQuery and PHP, sorry…

  • Taha Baba

    thanks :D
    can i make it reverse ? countdown from 60 to 0 then firing a function ?

  • Ben

    Thanks for the demo! I cant figure out how to remove ms from the counter, any help would be appreciated!