Daily Design Notes

How to Make a jQuery Countdown Timer Script

timer-script
Make a jQuery Countdown Timer Scripts

Reviewed by Burak ATILLA on .

very nice jquery script tutorial!

Rating: 10 out of 10

In this tutorial, we will see how to make a jQuery countdown timer script. The script 100% free for our subscribers / readers. So, you can use this jQuery on a under construction sites or landing pages. They can also be used to countdown to a release date of a game, a movie or to a party. This is an awesome Countdown script from Daily Design Notes blog. Just click download button and get it for free!

This script has been update (18 April, 2013) We've added more style codes.

Tutorial Details

jquery-countdown-timer-script

Now, if you see demo, time to learn "How to Make a jQuery Countdown Timer Scripts" right now...

Step - 1 (jQuery)

Step one, add these jQuery scripts to your html file above


tag.

  
  
			

Step - 2 (CSS)

Step two, add these css codes to your style.css file (where you want).

/* COUNTER */
#counter-wrapper{position:relative;margin:0 auto;display:table;}
.countdown_section{ width:100px;margin:20px 3px;height:100px;float:left;padding:5px;text-align:center;
			border-width: 1px;
			border-style: solid;
			border-color: #222222;
			color: #f8f6ee;
			font-weight: 700;
			font-size: 18px;	
			-webkit-border-radius: 3px;
			   -moz-border-radius: 3px;
					border-radius: 3px;
			-webkit-box-shadow: inset 0 1px #4d4b46;
		  	    -moz-box-shadow: inset 0 1px #4d4b46;
					box-shadow: inset 0 1px #4d4b46;
			background: #232323; /* Old browsers */
			background: -moz-linear-gradient(top,  #232323 0%, #000000 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#232323), color-stop(100%,#000000)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  #232323 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  #232323 0%,#000000 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  #232323 0%,#000000 100%); /* IE10+ */
			background: linear-gradient(to bottom,  #232323 0%,#000000 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#232323', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
		}
.countdown_section:hover{
			background: #000000; /* Old browsers */
			background: -moz-linear-gradient(top,  #000000 0%, #232323 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#232323)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  #000000 0%,#232323 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  #000000 0%,#232323 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  #000000 0%,#232323 100%); /* IE10+ */
			background: linear-gradient(to bottom,  #000000 0%,#232323 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#232323',GradientType=0 ); /* IE6-9 */
}


.countdown_amount{margin:5px;font-size:190%;line-height:50px;font-weight:bold;text-align:center;}
.countdown_day{text-align:center;font-size:80%;text-transform:uppercase;}

Step - 2 (Usage)

Last step, add this html code to where you want to show your countdown (like index.html etc.).

     

That's it.! This is end of our little tutorial. I hope you benefit from this simple example. Always suggestions and possible corrections are welcome. Please share your comments with us if you have any questions or say "thanks" :)

Get free tips and resources from Daily Design Notes to help you build a better blog and expand your audience!

 
Comments

How would I change the countdown time?

Change time = new Date(2013,12-1,28,0,1); from the step - 1 jQuery.

Nice tutorial simple and understanding.. Thanks Suzanna.

Please suggest me how set timer for 15 miutes.

Rashid, edit time settings like : time = new Date(2013,12-1,28,0,1);

Hi,
firstly thanks a lot for this !
i'm having problem: locally my countdown is good and set but when i put it on me serve on line it didn't work and chrome tells me some files are missing online... any idea where it came from?

Thanks for your answer

Rolland, thanks for your comment. So, i dont have any idea for your problem. I'am sorry for this.

Hi there, does the time change according to BST and GMT automatically?

Melanie, yeap time change according to BST and GMT automatically. Thanks for stopping DDN!

Can you break down the new Date( format? what is 12-1 is that December-1, then what is 28?

other than 2013, which is obviously the year, what do the other numbers stand for? Would be extremely helpful instead of wasting valuable time randomly changing numbers with no clue what each does.

How can I easily change it to count up?
And to set start date time.

Neven,

Just edit this line : time = new Date(2013,12-1,28,0,1);

For example : time = new Date(2013,12-1,ADDDAY,ADDMINUTE,ADDHOUR);

Slick and easy to use. I am looking at using it to show a schedule for different upcoming events around the world. Is there a way to specify the time in GMT to make it easier to calculate/update things or to specify the time zone difference from GMT for the next event?

Hi Suzanna
Thank you so much for taking the time to help everyone with this awesome tutorial.
The Problem seems with everyone, including me:) is how to set the time? i know you changed it here: time = new Date(2013,12-1,28,0,1);
But i can't seem to work it out, to round down for 4 days at 8am in the morning? i tried so many numbers and ways but was not is getting the days down from "4 days".

please could you please explain how i can get the days that low with an example....please..

Is there a simple way to eliminate the seconds?

Hey guys,

I figured out how to set the date but not the exact hour/minute -

This is the breakdown that i figured so far:

time = new Date(2013,12-1,28,0,1);

2013 = The Year
12-1 = This is the months, so if you want the countdown for April, then it should be 4-1 (i think the first digit should be the month you want, and you need to ad the '-1' to indicate April to January.
28 = This is the date you want (so it would be 28 April 2013)

As for the rest...not quite sure! Just play around i guess.

None the rest...great code

thank you ,, It's pretty easy :)

Leave a Reply

 
Web Design Blogs Internet Blogs Web Design