8/14/2019 Countdown Timer Using Jquery

1/3

CountdownTimer Using Jquery

Hi friends,

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

In one of application the client want to display the count down timer.For that I chooseJquery 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: countDownAuthor: David WalshModified by:Vinoth Kumar.SVersion: 1.0.0

Date: FEB 05 2010Built 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);

http://technotiger87.blogspot.com/2010/02/countdowntimer-using-jquery.htmlhttp://technotiger87.blogspot.com/2010/02/countdowntimer-using-jquery.html

8/14/2019 Countdown Timer Using Jquery

2/3

//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);//loopagevar 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";

8/14/2019 Countdown Timer Using Jquery

3/3

#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 >

visit http://technotiger87.blogspot.com/ for more informations.

Please use this and leave the comment to us