Creating a countdown timer in javascript

On one of the projects I am working upon currently, we needed a countdown timer in JavaScript. User had to fill in a form and we wanted to restrict that time to 5 minutes and simultaneously show him how many minutes/seconds are left now. After the set time limit is crossed user is informed that a timeout has occurred.

Here is the code for timer(call it timer.js):

var timer = {
	minutes :0,
	seconds : 0,
	elm :null,
	samay : null,
	sep : ':',
	init : function(m,s,elm)
	{
		m = parseInt(m,10);
		s = parseInt(s,10);
		if(m < 0 || s <0 || isNaN(m) || isNaN(s)) { alert('Invalid Values'); return; }
		this.minutes = m;
		this.seconds = s;
		this.elm = document.getElementById(elm);
		timer.start();
	},
	start : function()
	{
		this.samay = setInterval((this.doCountDown),1000);
	},
	doCountDown : function()
	{
		if(timer.seconds == 0)
		{
			if(timer.minutes == 0)
			{
				clearInterval(timer.samay);
				timerComplete();
				return;
			}
			else
			{
				timer.seconds=60;
				timer.minutes--;
			}
		}
		timer.seconds--;
		timer.updateTimer(timer.minutes,timer.seconds);
	},
	updateTimer :  function(min,secs)
	{
		min = (min < 10 ? '0'+min : min);
		secs = (secs < 10 ? '0'+secs : secs);
		(this.elm).innerHTML = min+(this.sep)+secs;
	}
}
function timerComplete()
{
	alert('time out buddy!!!');
}

To start the timer put these lines after you have included the timer.js

window.onload = init;
function init()
{
    timer.init(0,55,'container');
}

On the markup side create an element with id=container

init function accepts 3 parameters : minutes, seconds and the id of html element where the countdown will be displayed.
You will also need a function which will run after the timer’s execution has completed. For this purpose there is the function timerComplete included in the timer.js file. Write any code here that you would like to execute after timer has terminated (like redirect the user).
Also make sure that you have an html element with id set to container on your html page.
Above timer will do a countdown for 55 seconds. After 55 seconds, function timerComplete will be executed.
You can see a demo here and if you wish you can also view page source code for javascript code.

Download timer.js from this link

Give this  article a Thumbs-up on Stumbleupon if you liked it.

Related Posts

• Why you MUST use client side validation
• Filling a select box using javascript and jQuery
• 8 blogs you must read if you are a web developer
• jQuery Tip: Finding tag name of an element
• 61 jQuery Image and gallery plugins