CancelImage Upload

How to build a countdown clock in JavaScript

Let's face it, if there is one thing the internet was built for, it is countdown clocks. Countdown until the NBA season starts, countdowns until a movie is released and of course countdowns until the end of the world are ever popular examples.

Note that in our example below we will perform a simple 24 hour countdown. One that counts down the amount of seconds till the end of the world, but never fear, all that is needed is a simply refresh and the clock will start again.

For a countdown to a fixed point in time you will need to perform some time calculations to establish how much time is left between now and that point of time within the near or distant future!

Moving on to our countdown function however. Our first step will be to initiate a variable containing the total amount of time left in seconds. We will do this as follows:

var totalSeconds;

function initiate(seconds)
{

       totalSeconds = parseInt(seconds);

       setInterval("timeUpdate()", 1000);

}

//Here's how you get 24 hours in seconds, 24 times 60 times 60.

initiate(24 * 60 * 60);

Note how the amount of seconds is established when we call upon the function initiate. Once inside the function we will first parse the amount of seconds, then call upon our second function, timeUpdate(), after a one second pause of course!

function timeUpdate()
{

       var seconds = totalSeconds;

       if(seconds > 0)
       {

              totalSeconds--;

              var hours= Math.floor(seconds/3600);

              seconds %= 3600;

              var minutes = Math.floor(seconds/60);

              seconds %= 60;

              var timeIs = ((hours < 10) ? "0" : "") + hours + ":" + ((minutes < 10) ? "0" : "") + minutes + ":" + ((seconds < 10) ? "0" : "") + seconds;

              document.getElementById("timeLeft").innerHTML = "" + timeIs;

       }
       else
       {

              document.getElementById("timeLeft").innerHTML = '';

              document.getElementById("message").innerHTML = 'The world has ended! Or has it?';


       }

}

As you can see the function timeUpdate() simply takes off another second, and outputs the current time to a span with the ID of timeLeft inside the HTML document. If we have reached 00:00:00 the span with the timeLeft ID will be set to zero, and another span with the ID message will be changed to The world has ended! Or has it?.

Here's a look at the code surrounded by HTML:

<html>
<head>
<title>Countdown till the end of the world!</title>
<script type = "text/javascript">

var totalSeconds;

function initiate(seconds)
{

       totalSeconds = parseInt(seconds);

       setInterval("timeUpdate()", 1000);

}

function timeUpdate()
{

       var seconds = totalSeconds;

       if(seconds > 0)
       {

              totalSeconds--;

              var hours= Math.floor(seconds/3600);

              seconds %= 3600;

              var minutes = Math.floor(seconds/60);

              seconds %= 60;

              var timeIs = ((hours < 10) ? "0" : "") + hours + ":" + ((minutes < 10) ? "0" : "") + minutes + ":" + ((seconds < 10) ? "0" : "") + seconds;

              document.getElementById("timeLeft").innerHTML = "" + timeIs;

       }
       else
       {

              document.getElementById("timeLeft").innerHTML = '';

              document.getElementById("message").innerHTML = 'The world has ended! Or has it?';


       }

}

//Here's how you get 24 hours in seconds, 24 times 60 times 60.

initiate(24 * 60 * 60);

</script>
</head>
<body>
<span id="message">Countdown till the end of the world: </span><span id="timeLeft">24:00:00</span>
</body>
</html>


Login
Want to leave a comment?

No problem. Just enter your email and password below.


register | home | reminder

myDesignTool Networking • www.mydesigntool.cominfo@mydesigntool.com