Scroll to Top

How to Make a jQuery Countdown Timer Script

Posted in Tutorials2 years ago • Written by Suzanna18 Comments
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!

[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" :)

TAGS: , , , , ,

18 Comments so far. Feel free to join this conversation.

  1. John December 28, 2012 at 11:45 pm - Reply

    How would I change the countdown time?

    • Suzanna December 29, 2012 at 7:30 am - Reply

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

  2. Adam December 29, 2012 at 11:58 am - Reply

    Nice tutorial simple and understanding.. Thanks Suzanna.

  3. Rashid Khan February 2, 2013 at 11:36 am - Reply

    Please suggest me how set timer for 15 miutes.

    • Suzanna February 2, 2013 at 12:24 pm - Reply

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

  4. rolland February 9, 2013 at 1:30 pm - Reply

    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

    • Suzanna February 15, 2013 at 1:38 pm - Reply

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

  5. Melanie February 15, 2013 at 11:48 am - Reply

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

    • Suzanna February 15, 2013 at 1:39 pm - Reply

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

  6. Jen February 26, 2013 at 9:17 pm - Reply

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

  7. MikeL March 14, 2013 at 3:28 am - Reply

    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.

  8. Neven March 24, 2013 at 5:29 pm - Reply

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

    • Suzanna March 24, 2013 at 7:33 pm - Reply


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

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

  9. Dave March 27, 2013 at 3:15 pm - Reply

    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?

  10. Blaine April 4, 2013 at 9:21 pm - Reply

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

  11. cachecounty April 8, 2013 at 4:50 pm - Reply

    Is there a simple way to eliminate the seconds?

  12. Anderson April 18, 2013 at 7:38 am - Reply

    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

  13. متبعي السلف July 20, 2013 at 12:49 am - Reply

    thank you ,, It's pretty easy :)

Leave A Response