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.