O'Reilly

jQuery Countdown Plugin

By on  

You've probably been to sites like RapidShare and MegaUpload that allow you to download files but make you wait a specified number of seconds before giving you the download link. I've created a similar script but my script allows you to animate the CSS font-size of each second and present a reward at the end.

The jQuery JavaScript

jQuery.fn.countDown = function(settings,to) {
	settings = jQuery.extend({
		startFontSize: "36px",
		endFontSize: "12px",
		duration: 1000,
		startNumber: 10,
		endNumber: 0,
		callBack: function() { }
	}, settings);
	return this.each(function() {
		
		//where do we start?
		if(!to && to != settings.endNumber) { to = settings.startNumber; }
		
		//set the countdown to the starting number
		jQuery(this).text(to).css("fontSize",settings.startFontSize);
		
		//loopage
		jQuery(this).animate({
			fontSize: settings.endFontSize
		}, settings.duration, "", function() {
			if(to > settings.endNumber + 1) {
				jQuery(this).css("fontSize", settings.startFontSize).text(to - 1).countDown(settings, to - 1);
			}
			else {
				settings.callBack(this);
			}
		});
				
	});
};

Sample Usage

jQuery("#countdown").countDown({
	startNumber: 10,
	callBack: function(me) {
		jQuery(me).text("All done! This is where you give the reward!").css("color", "#090");
	}
});

The script is very customizable and the settings are self-explanatory.

Check out the MooTools version.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

Discussion

  1. That’s funny, I did basically the same yesterday, only using PHP and CSS though. You can see my randomly styled PHP countdown here. Great blog you have.

  2. Nice! I like this kind of stuff! Love your snippets

  3. Vimal

    Really Nice one. Thanks for sharing.

  4. Cool snippet! Made this myself last week but this one is much better! Thanks man!

  5. very cool script. I’d like apply it on my website

  6. excelente!

  7. ezFlash

    these snippets are all cool but they never seem to work for me. Its so frustrating. I have the countDown.js file linked with the sample code, altered to have my div class in there…and nothing. dammit.

  8. ezFlash: No offense, but your comment was useless. How about providing a link to your code so we can help?

    • Tornado

      Hi David!
      I completly novice in working with scripts. I need a script, like yours. This is simple and customizable. I would like to use it as server side script. I know that I need a source script, and some lines on the page in head, and some more in the body section. I try to use your script, but I can’t. I know this is not the right place to ask a tutorial, but I couldn’t find such a good script anywhere. So help me please with an empty html page, with only your script, or a step by step tutorial. Thank you very musc and congratulation to your script…

  9. ezFlash

    I copied the source and it worked. Thanks :)
    Maybe its something with the linked file that I’m doing wrong or the placement of the sample usage vs. the link…. I don’t know. anyway thanks again

    ezFlash

  10. Hi all,

    Nice script I only have one question; I would like to use this script to countdown from let’s say 5 minutes and then repeat that. Hoe can I archieve this?

  11. Thanks for this demo. I love the idea but I wanted to know if you could show how to alter this code so that it becomes a date countdown? I am looking for countdown to tax day.

  12. Thanks for the plugin.
    Here is a small modification for those who want to show time instead of minutes

    //where do we start?
    if(!to && to != settings.endNumber) { to = settings.startNumber; }
    
    hours = Math.floor(to / 60);
    minutes = Math.round(to % 60);
    if (minutes < 10) {
    	minutes = "0"+minutes;
    }
    
  13. And change the text of course:

    //set the countdown to the starting number
    $(this).text(hours + ':' + minutes).css('fontSize',settings.startFontSize);
    
    • Hugo

      You are good man! it works great!…

  14. Try this, if you maybe need to have a choice on the direction it is counting:

    jQuery.fn.countDown = function(settings,to) {
    	settings = jQuery.extend({
    		startFontSize: '12px',
    		endFontSize: '12px',
    		duration: 1000,
    		direction: 'down',
    		startNumber: 10,
    		endNumber: 0,
    		callBack: function() { }
    	}, settings);
    	return this.each(function() {
    		
    		//where do we start?
    		if(!to && to != settings.endNumber) { to = settings.startNumber; }
    		
    		//set the countdown to the starting number
    		$(this).text(to).css('fontSize',settings.startFontSize);
    		
    		//loopage
    		$(this).animate({
    			'fontSize': settings.endFontSize
    		},settings.duration,'',function() {
    			
    			if(settings.direction == 'down'){
    				if(to > settings.endNumber + 1) {	
    					$(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1);
    				}
    				else{
    					settings.callBack(this);
    				}
    			}
    			
    			if(settings.direction == 'up') {
    				if(to < settings.endNumber + 1) {	
    					$(this).css('fontSize',settings.startFontSize).text(to + 1).countDown(settings,to + 1);
    				}
    				else{
    					settings.callBack(this);
    				}
    			}
    			
    		});
    				
    	});
    };
    
  15. how do i do a time extension with this ? as in when users entered a bid or something the time extends directly in the page without refreshing in the explorer?

    i know there is something to do with httprequest ajax but i could not find any help in google or yahoo neither forums anyone can help ?

  16. i want the time to adjust immediately when the user submits the bid, then just add 15 seconds to the timer after you successfully send the bid via ajax. can anybody help me ?

  17. ok what i have for the code which is the jquery countdown timer.

    I wana make it Extends for the timer for example timer is 30 secs when i click on bid it will extend for another 10 secs into the database and it will update the existing countdown timer to 45 secs automatically

    does anyone knows how to do that ?

  18. arcane

    can we reset the countdown (without reloading)? I can’t figure out a way to stop the original countdown when starting a new one in the same div.

  19. Karan

    Hi David,

    I want to show the countdown in following two different formats as below:-

    * min:seconds (Example- 8:29)
    * hour:min:seconds (Example – 1:06:44)

    Please suggest the solution in javascript.

    Thanks

  20. Hello David,

    It is possible to display HTML instead of “All done! This is where you give the reward!” It is not working for me to simply replace above text with a small piece of html (a simple a href link).

  21. Leo Siqueira

    It’s a very impressive plug-in, but I have a little problem. The countdown works fine on my system at the first call. I have a tree with a lot of items on the left, one content and a tasks with the countdown.

    When the users click on one of each item on the left menu, I call the content and the tasks with the load() function from jQuery. That’s fine, all works, but, if I click on another item on the left menu, the content is called, as the tasks too, but the countdown make a overlap counter. For example:

    Countdown from 30 > 0, I click on the item at the left menu when the counter value is 20. I populate the content and the tasks, but the counter looks like duplicated, his start the countdown on 30′ and mantains another with 20′.

    Any one has a idea to solve this problem ? I already try the clearInterval and others, without success.

    Thanks !
    Leo

    • RameshSakibanda

      I am running into the same issue, parallel count down on same element.

    • Chris

      Did anyone manage to solve this issue? Hitting the same thing here now.

    • Commenter RameshSakibanda

      1. Create a variable keepAlive and initialize to 0
      2. increment keepAlive, Pass this value as one of the parameter in settings to the plugin and Start CountDown
      3. modify if condition to the plugin ‘timeOut > settings.endNumber + 1 && settings.alive === keepAlive’

      4. It should work fine

  22. For those who asked how to stop the counter. Here’s with what I came up:

    jQuery.fn.countDownStop = function() {
    	return this.each(function(){
    		$(this).stop(true);
    	});
    };
    
  23. Thank you very match … it help me ..

  24. Hey linkyndy! Wanna know how to use that code to stop the counter, actually im trying to stop it on “click” of a “close” button… any suggestion?

    thanks!

  25. inas

    hi ,, very nice one ,,
    i want a script for count down date and time for my bidding system ,And please i want to know how can i use it in my php website ,,,, ?

    thanks !

  26. made and addition if anyone want the single numbers 9-0 to have a 0 in front of it. at
    $(this).countDown(settings, to – 1);
    if (to <= '10') {
    numberValue = (to -1);
    $(this).text('0' + numberValue);
    }

    the plugin in works very will. Thanks for the share!

  27. kexxcream

    How would you write it so the user can get redirected to a URL once the countdown is completed?

  28. Hemant

    I think this works for small values only as you are creating stack and using the duration to help. I find it slows down in 1 hours counter I see the difference of more than 15 min.

  29. Toto

    Dear David,

    Does this script still work with the last jquery lib ?

    Can you also specify that we need a span or div in the body with id countdown ?

    Many thanks

    TOTO

  30. JD

    there is a problem with your code , “animate function” in jquery have a problem when the page is not focus you will have a difference of time
    between real duration time and countdown duration time.

    i suggest to replace “animate” by “delay and queue” function :

    $(this).delay(settings.duration).queue(function( next ){ 
    	if(to > settings.endNumber + 1) {
    		$(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1);
    	}
    	else
    	{
    		settings.callBack(this);
    	}
    	next();
    });
    
  31. kajal

    i applied this countdown timer in my dialogs. but when countdown is displayed on dialog and i open the new tab in browser, the countdown value disappears

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...