Restyr web development tutorial

Easy to follow tutorial for web development PHP, JQUERY, CSS and HTML with free source code

JavaScript jQuery countup or countdown clock timer

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:

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”

  • repocx says:

    nice timer this is what i need for my project.

  • emma says:

    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

    • rrcom says:

      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.

  • Alice says:

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

    • rrcom says:

      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

  • Terry says:

    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?

  • john says:

    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?

    • rrcom says:

      yes it is possible

      var 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!

  • johnmill says:

    problem solve thanks man.

  • JC says:

    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?

  • Terry says:

    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?

  • Avi says:

    Hi, awesome plugin. How would you adapt this to countdown from 20?

  • bIgB says:

    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!

  • Phatoa says:

    Thanks you!

  • kempyyyy says:

    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!

  • kempyyyy says:

    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!

  • roos says:

    can i also have two of those acting differently?

  • Halvor says:

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

  • Edward says:

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

  • Payal Desai says:

    How to resume the timer automatically after reload the page.

  • kurt says:

    how to separate it to 2 or more timer?

  • Bhavesh says:

    How to set my Custome time like 1200 sec in timer?

  • Julio says:

    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)

  • abbas says:

    tanx alot

  • Tamera says:

    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

  • Floyd says:

    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

  • Trisha says:

    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

  • siddharth says:

    i want to make this as 2 minutes counter.
    How can i achieve this?

  • Johan Cabeza says:

    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!

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="">