go top

JavaScript Countdown Timer

Timed events are fun and interactive for your users. People love performing in some type of competition, but there are many other reasons to show a JavaScript timer on your website. Regardless of the reasons, I am going to show you how to create a countdown timer using JavaScript and HTML. My primary caution for you is to understand JavaScript handled on the client side and has a dependency on the user's computer speed. However, countdown timers are still effective for encouraging your users to quickly perform a particular task.

In our example, we want an easy little time to countdown from one minute. Let's build our first JavaScript countdown display:

<span id="countdown" class="timer"></span>
<script>
var seconds = 60;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Buzz Buzz";
} else {
seconds--;
}
}

var countdownTimer = setInterval('secondPassed()', 1000);
</script>


For all of this to be possible, we need to use the "setInterval" function in JavaScript. You need to pass in our "secondPassed" function and the number of milliseconds into it (1000 milliseconds = 1 second). We set our "setInterval" function and the "seconds" variables in the global scope because we need to refer to each of them inside the function, but we wouldn't want to pass them in as variables.

In our "secondPassed" function, we create a "minutes" variable that rounds down to the minute so that we can have left over seconds. Those left over seconds go into our "remainingSeconds" variable by using the modulus operator. Since our time system is rather quirky, we have to handle placing a zero before the first 10 seconds. Sure, we could cast this into a time variable and have the same effect, but we do not want our JavaScript to work too hard when a simple string prepend will do the trick.

After we have separated our minutes from seconds, we show them in our "countdown" span. We finally set up an ending for our countdown because negative seconds would not make much sense to our users. But, we must still have a way to countdown the seconds. So, we set up a condition that tells us when we reach zero to stop (clear) our global timer variable, "countdownTimer". Most of the time, our timer will continue into the else statement where it will just decrements the "seconds" variable.

For those who are care about the exact time, you can use more complicated time functions to update the seconds every 10 real seconds. I believe that is very excessive, but feel free to give it a shot. Also, this function is actually a 61 second timer because it takes 1 second for the function to begin on the initial run.

Well, that is a simple timer in a nutshell. Feel free to modify the script to inspire your users to be more productive.

25 Comments to "JavaScript Countdown Timer"

  • ismarv

    ismarv

    January 13, 2017 at 15:38 pm

    wao it cool thank so much it work

  • saroj

    saroj

    October 9, 2015 at 09:39 am

    How to make it like hh:mm:ss??
    its only mm:ss like that.

  • vikash raj

    vikash raj

    June 9, 2015 at 08:41 am

    it's very easy and usefull

  • coco hacker

    coco hacker

    April 1, 2015 at 07:33 am

    Awesome and very easy.
    nice work keep it.

    thank u very much for such a simplified timer code.

  • srikanthreddy

    srikanthreddy

    February 27, 2015 at 09:59 am

    thanks friend useful for my project

  • Angelo

    Angelo

    January 17, 2015 at 04:14 am

    Hi how to add this into submit button.

  • vikash rathore

    vikash rathore

    December 29, 2014 at 14:52 pm

    not working when i m using

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">


  • balamurugan

    balamurugan

    December 12, 2014 at 14:20 pm

    Good It's Really helpful for fresher to learn count down timer concept in java script ...

  • ali

    ali

    November 18, 2014 at 15:09 pm

    its giving me minutes in - negitive sign....
    var hours = Math.round(seconds / 3600);
    var minutes = Math.round((seconds - (hours * 3600)-30)/60);
    var remainingSeconds = seconds % 60;

  • Olufemi

    Olufemi

    October 22, 2014 at 00:05 am

    how do I get this code to pop-up on a page, disable the page and redirect to another webpage when the time expires or better still enable the disabled page for another round of action again after the submit button is clicked?

    Thanks in anticipation for your helpful response

next

Add your comment

Captcha
    • Free Scripts

      Add great new functionalities to your website with our Free Scripts collection.

      Free scripts
    • PHP Scripts

      Check our extensive collection of top-notch PHP Scripts that will enhance your website!

      Commercial PHP scripts