How to create a countdown timer in Javascript

**Vswe** · 11-08-2009 06:04 AM

To create a countdown timer in JavaScript we will first need to make it tick with a interval of 1000 milliseconds (1 second). To do this we have to use the window.setTimeout function which will call a JavaScript function after a certain amount of time, like this:

[highlight=JavaScript] window.setTimeout("Tick()", 1000);

function Tick() {

}[/highlight]

So this will call the function called Tick after 1000 milliseconds, but each time Tick is called we want to set the timer to 1 second to make the timer continue so therefor it should look like this:

[highlight=JavaScript] window.setTimeout("Tick()", 1000);

function Tick() {
window.setTimeout("Tick()", 1000);
}[/highlight]

So now we've made the base of the timer, the function Tick will be called once each second. But we want to be able to use it to change the text of something to show the time, so we can change the above code to this:

[highlight=JavaScript]var Timer;
var TotalSeconds;

function CreateTimer(TimerID, Time) {
Timer = document.getElementById(TimerID);
TotalSeconds = Time;

UpdateTimer()
window.setTimeout("Tick()", 1000);
}

function Tick() {
TotalSeconds -= 1;
UpdateTimer()
window.setTimeout("Tick()", 1000);
}

function UpdateTimer() {
Timer.innerHTML = TotalSeconds;
}[/highlight]

So we have one function where we're creating the timer by getting an ID of the element we want to be a timer and the seconds it should tick down from which is stored in Timer and TotalSeconds, then we call the function UpdateTimer and then call the function Tick with a delay of 1 second. Each time the function Tick is called it lowers the amount of seconds by one and Calls UpdateTimer and set a timeout on it self on 1000 milliseconds. The function UpdateTimer will set the timers content to be the amount of seconds left.

So the above example simply use one element to tick down once a second and display it in the element.

The HTML for using it looks like this (if the above code is saved in /Timer.js):

HTML Code:

<html>
<head>
<script type="text/javascript" src="/Timer.js" />
</head>

<body>
<div id='timer' />
<script type="text/javascript">window.onload = CreateTimer("timer", 30);</script>
</body>
</html>

The div above is our timer and the row below it will start the timer at 30 seconds.

But there's two more things we should add, first thing is that our timer should stop at 0, not continuing to negative values as it do now, to fix this we'll change the Tick function to this:

[highlight=JavaScript]function Tick() {
if (TotalSeconds <= 0) {
alert("Time's up!")
return;
}

TotalSeconds -= 1;
UpdateTimer()
window.setTimeout("Tick()", 1000);
}[/highlight]

So if the timer has reached 0 (or just to be sure is below 0) we do what we want to happen when the time reaches 0 (in this case showing an alert box) and the use return to exit the function. By exiting the function here the timer will stop since we'll exit the function before the line with window.setTimeout.

The other thing we need to add is the conversion from seconds to seconds, minutes, hours and maybe days since now it only show the amount of seconds left, to fix this we have to change the UpdateTimer function to something like this:

[highlight=JavaScript]function UpdateTimer() {
var Seconds = TotalSeconds;

var Days = Math.floor(Seconds / 86400);
Seconds -= Days * 86400;

var Hours = Math.floor(Seconds / 3600);
Seconds -= Hours * (3600);

var Minutes = Math.floor(Seconds / 60);
Seconds -= Minutes * (60);

var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds)

Timer.innerHTML = TimeStr;
}

function LeadingZero(Time) {

return (Time < 10) ? "0" + Time : + Time;

}[/highlight]

In the UpdateTimer function we now stores the TotalSeconds' value in a variable called Seconds and extracting the days, hours and minutes from it so there's only the seconds left. Then we store everything as a string called TimeStr, if the days is greater then 0 we adds them in the beginning. On the hours, minutes and seconds we're using a function called LeadinZero, it will return the hours, minutes or seconds with a leading 0 if they only had one number before. This will make the output something like this:

Code:

00:02:26

Instead of this:

Code:

0:2:26

Then we just set the Timer's text to be the value of TimeStr. If you want you can replace this line:

[highlight=JavaScript] Timer.innerHTML = TimeStr;[/highlight]

with something like this:

[highlight=JavaScript] Timer.innerHTML = TimeStr + " until my birthday!";[/highlight]

This was everything about "How to create a countdown timer in Javascript". Hope you'll find this useful.