Posted by & filed under Javascript, Tutorial.

Today I will show you how to create a timer using Jquery, HTML and CSS. Our timer consist of five (5 ) control button a start, stop, reset, count up and a count down button. Here is a live preview of what we are going to code today. You may click the button to see how it works.


live demo:

00:00:00

The start button will start the countdown or count-up of the timer, the stop button for stopping or pausing the timer, the reset for reinitializing the timer, the count up mode means the timer will count upward and the count down mode which is the vice versa of count up mode. This demo timer will trigger a call-back when the time reaches zero (0) that will generate a popup alert message that say “timeout”.

Let’s start building our timer.
First we need to create our 3 files. The files we need to create are

  1. index.html
  2. stylesheet.css
  3. timer.js

Lets first code our index.html.
index.html

The line 3, 4 and 5 in the index.html are the files we need to include to complete the timer. Line 3 is the CSS style sheet used for designing the timer, line 4 is the JQUERY library and line 5 is the JavaScript for the timer.
On the body side, lines 9 to 10 are the required tag for the timer. As you can see the timer are contained within a div with a timer class. Inside the div are the hour minute and second span tag.
Lines 13 to 17 are the control button for controlling the timer. This is only a basic button with an onclick event. The onclick events are handled by the timer.js that I will show you later.

Adding some design.
stylesheet.css

This is a very simple designed for our timer and it can be placed inline within the html code, but this is not a good practice. Since the code is self-explanatory I will not go further with this one.

Now the brain of our timer. The explanation are written inline
timer.js

Timer.js is already a library that we can use to run our timer. If you place all this require files in a directory (index.html, stylesheet.css, timer.js) and run the index.html you will see a timer same as the example demo on this page. The JavaScript is written in OOP. You may copy this code to yours and since this is a OOP it is much safer to mix this to other codes.

30 Responses to “JavaScript jQuery countup or countdown clock timer”

  1. emma

    nice plugin. i intend adapting this to my project ..how ever i need a simple instruct on where to set the duration f the timer

    Reply
    • rrcom

      Set the parameter of timer.reset(60) method to the number of seconds you want

      If you want the timer count faster or slower, set the parameter of timer.start(1000) in milliseconds (1000 means count every 1 of a second of a real clock). This method starts the timer and at the same time setting the speed of counting.

      Reply
  2. Alice

    Great plugin. Just one question, how can i set a callback every 5 seconds while the timer is counting up?

    Reply
    • rrcom

      Since you want to control the timer on run time, you need to set some control variable that you can access outside callback function.

      set secondsToTrigger variable on runtime to set the triggering time of timer

      Reply
  3. Terry

    Wow !!! One of the most versatile counters I’ve seen.

    A couple of questions…

    -> When we click count-up or count-down buttons, is it possible to change their color to know that it is in ‘that’ particular mode?

    -> and maybe a possibility to enter the time we require in the box itself rather than editing the js files?

    Reply
  4. john

    is it possible to add a feature, so that if the timer is counting down from 60 minutes, when it reaches zero, it automatically resets and starts counting down from 60 minutes again?

    Reply
    • rrcom

      yes it is possible

      var timer;

      Reply
  5. Online School Timer

    You actually make it seem so easy with your presentation but I find this topic to be actually something that I think I would never understand.
    It seems too complicated and extremely broad for me.
    I am looking forward for your next post, I will try to
    get the hang of it!

    Reply
  6. JC

    Thanks for post. I found it helpful. However I do have 2 questions…

    1. I wasn’t able to start the timer on page load. my code: onload=”timer.start(lockoutperiod);” on a div object.

    2. I was able to start the timer with the example button but the timer is running way faster than 1 second ticks. Has anyone encountered this behavior?

    Reply
  7. Terry

    I trying to adapt this for our youth climbing team’s training. It needs to be accurate within 1/100 of a second. Can this be done easily?

    Reply
  8. bIgB

    Great script, I am totally new to JavaScript and needed a timer really urgently and this is just what I needed. One question though, can I specify a particular date from which the timer will start ? If I can do that then it would be really great. Thanks!

    Reply
  9. kempyyyy

    I’m new to javascript. Can you help me get the value of the counter (in seconds) when I stop the counter? I’ll be needing this to save it to the database. thanks!

    Reply
  10. kempyyyy

    also, how can I set the minutes to 0? I need only a countup timer that starts form 0. please help me. thanks a lot!

    Reply
  11. Halvor

    Hey. Great script. How do I set this up so that I can have multiple counters on a page? Cheers.

    Reply
  12. Edward

    Nice! I have one question….How to force the counter to keep running on refresh page… Thanks!

    Reply
  13. Julio

    Can you tell us more about this? I’d like to find out
    some additional information.

    Feel free to visit my site Blog Writing (Julio)

    Reply
  14. Tamera

    It’s hard to find your website in google. I found it on 15 spot,
    you should build quality backlinks , it will help you to increase traffic.
    I know how to help you, just type in google – k2 seo tips

    Reply
  15. Floyd

    I see a lot of interesting posts on your page.
    You have to spend a lot of time writing, i know how to save you
    a lot of time, there is a tool that creates unique, SEO friendly articles
    in couple of minutes, just type in google – k2
    unlimited content

    Reply
  16. Trisha

    I read a lot of interesting posts here. Probably you spend a lot
    of time writing, i know how to save you a lot of time, there is an online tool that creates readable,
    google friendly posts in seconds, just search in google – laranitas free
    content source

    Reply
  17. Johan Cabeza

    Hi, how are you buddy, this project is awesome, but i need to integrate a functionallity.

    I make a calculator, this calculador give me just two options, one of this give me time and the other give me money.

    I need that the options start from the outcome of the calculator.

    Greetings from colombia.

    Nice project man!

    Reply

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">