How to Make a jQuery Countdown Timer Script

How to Make a jQuery Countdown Timer Script
[rating itemreviewed=”Make a jQuery Countdown Timer Scripts” rating=”10″ reviewer=”Burak ATILLA” dtreviewed=”15.12.2012″ summary=”very nice jquery script tutorial!” best=”10″ worst=”0″][/rating]

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!

[infopane color=”1″ icon=”0018.png”]This script has been update (18 April, 2013) We’ve added more style codes.[/infopane]

Tutorial Details


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



Step – 2 (CSS)

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

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


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” :)


  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

  2. 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.

    1. 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);

  3. 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?

  4. 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..

  5. 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

Post a Comment

Your email address will not be published. Required fields are marked *