How to create a JQuery Clock / Timer

javascript jquery timer clock
Ganesh Shankar picture Ganesh Shankar · Apr 9, 2010 · Viewed 198.8k times · Source

I have a simple quiz application and I want display a nice timer / clock at the top of the page which shows the user how long they've been going for. (If I could somehow show them a timer for Total Quiz Time and also a second one for This Question Time that would be even cooler but I should be able to figure out how to do myself that once I've got one timer working.

My question is:

What's a nice, easy way to show a simple timer / clock using JQuery? (straight JS is also ok) I know how to check time, but how do I get incrementing seconds?

My own searches keep leading me to JQuery plugins (I want to roll my own) and also "event timers" which are not what I'm looking for...

Answer

SLaks picture SLaks · Apr 9, 2010

You're looking for the setInterval function, which runs a function every x milliseconds.

For example:

var start = new Date;

setInterval(function() {
    $('.Timer').text((new Date - start) / 1000 + " Seconds");
}, 1000);

Related questions

Make countdown start after button is clicked

I'm creating a kid's game with a timer countdown that starts after the user clicks a button. The code I'm using initiates the countdown without a problem, but I'd like the countdown to start only after the button is clicked. …

Read More
What's the easiest way to call a function every 5 seconds in jQuery?

JQuery, how to call a function every 5 seconds. I'm looking for a way to automate the changing of images in a slideshow. I'd rather not install any other 3rd party plugins if possible.

Read More
setTimeout / clearTimeout problems

I try to make a page to go to the startpage after eg. 10sec of inactivity (user not clicking anywhere). I use jQuery for the rest but the set/clear in my test function are pure javascript. In my frustation …

Read More