CountdownTimer Using Jquery

Hi friends,

In this tutorial I am going tell about how to create and use th countdown Timer using Jquery.

In one of application the client want to display the count down timer.For that I choose Jquery and put it in my application.

The original count down timer is get from David walsh

I slightly modify it and give it to you.

First you need to put the Jquery plugin...

/*
Class:     countDown
Author:    David Walsh
Modified by:Vinoth Kumar.S
Version:   1.0.0
Date:      FEB 05 2010
Built For:  jQuery 1.2.6
*/

jQuery.fn.countDown = function(settings,to,id) {
settings = jQuery.extend({
startFontSize: '36px',
endFontSize: '12px',
duration: 1000,
startNumber: 60,
endNumber: 0,
myid:id,
callBack: function() { }
}, settings);
return this.each(function() {
//alert(settings.toString);
//where do we start?
if(!to && to != settings.endNumber) { to = settings.startNumber; }
//alert(settings.id);


//set the countdown to the starting number
//$(this).text(to).css('fontSize',settings.startFontSize);

hours = Math.floor(to / 60);
minutes = Math.round(to % 60);
if (minutes < 10) {
minutes = "0"+minutes;
}
$(this).text(hours + ':' + minutes).css('fontSize',settings.startFontSize);
//loopage
var myhour=hours + ':' + minutes;
$.cookie('test',myhour,{expires:7,path:'/'});

$(this).animate({
'fontSize': settings.endFontSize
},settings.duration,'',function() {
if(to > settings.endNumber + 1) {
$(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1);
}
else
{
$.cookie('test',null,{path:'/'});
settings.callBack(this);
}
});

});
};

Then create the Html Page

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< html xmlns="http://www.w3.org/1999/xhtml" > 
< head > 
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > 
< title > countdowntimer< /title > 
< style type="text/css" > 
@import "jquery.countdown.package-1.5.5/css/jquery.countdown.css";

#defaultCountdown { width: 240px; height: 45px; }
< /style > 
< script type="text/javascript" src="jquery/jquery-1.3.2.min.js" > < /script > 
< script type="text/javascript" src="jquery/countdownplugin.js" > < /script > 
< script type="text/javascript" src="jquery/cookie.js" > < /script > 
< script type="text/javascript" > 
$(document).ready(function() {

$('#countdown').countDown({
startNumber: 25,
callBack: function(me) {
$(me).text('All done! This is where you give the reward!').css('color','#090');
$.cookie('test',null,{path:'/'});
//$(this).text(hours + ':' + minutes).css('fontSize',settings.startFontSize);
},
id:5
});
});
< /script > 
< /head > 

< body > 

< p style="border:1px;margin:auto 0px;text-align:center;margin-top:250px;" > 
< span id="countdown" > < /span > 
< /p > 

< /body > 
< /html > 

Please use this and leave the comment to us