How to Make a jQuery Countdown Timer Script

Author: | Posted in Tutorials 18 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

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

Comments
  1. Posted by John
    • Posted by Suzanna
  2. Posted by Adam
  3. Posted by Rashid Khan
    • Posted by Suzanna
  4. Posted by rolland
    • Posted by Suzanna
  5. Posted by Melanie
    • Posted by Suzanna
  6. Posted by Jen
  7. Posted by MikeL
  8. Posted by Neven
    • Posted by Suzanna
  9. Posted by Dave
  10. Posted by Blaine
  11. Posted by cachecounty
  12. Posted by Anderson

Add Your Comment