Quick Tip: Make a jQuery Count Up Timer

Last year, I published a small tutorial about building a neat countdown timer. One of the requests I’ve been getting since, is for a way to change the code so it counts up – showing the time that has passed since the page was opened or some other point in time.

This is actually quite easy and will do a great topic for a quick tip. So here we go!

Step 1: Renaming The Old

First you need to grab a copy of the original plugin from the linked article above and extract it somewhere on your hard drive. Now you don’t want to have a plugin named count down that counts up do you? We have to rename it. Change the names of the assets/countdown folder and the files inside it to countup respectfully. Also remember to change the paths in index.html that refer to these files.

jQuery Count Up Timer

jQuery Count Up Timer

Step 2: Writing The New

Only minor modifications have to be done on the plugin itself. Open assets/countup/jquery.contup.js and do the following edits:

// Creating the plugin
$.fn.countup = function(prop){

	var options = $.extend({
		callback	: function(){},
		start		: new Date()	// Changing this to "start"
	},prop);

	// Tename the "left" variable to "passed"
	var passed = 0, d, h, m, s,
		positions;

	init(this, options);

	positions = this.find('.position');

	(function tick(){

		// Calculate the passed time
		passed = Math.floor((new Date() - options.start) / 1000);

		// Calculate the passed minutes, hours and days		

		d = Math.floor(passed / days);
		updateDuo(0, 1, d);
		passed -= d*days;

		h = Math.floor(passed / hours);
		updateDuo(2, 3, h);
		passed -= h*hours;

		m = Math.floor(passed / minutes);
		updateDuo(4, 5, m);
		passed -= m*minutes;

		// Number of seconds passed
		s = passed;
		updateDuo(6, 7, s);

		// Calling an optional user supplied callback
		options.callback(d, h, m, s);

		// Scheduling another call of this function in 1s
		setTimeout(tick, 1000);
	})();

	// This function updates two digit positions at once
	function updateDuo(minor,major,value){
		switchDigit(positions.eq(minor),Math.floor(value/10)%10);
		switchDigit(positions.eq(major),value%10);
	}

	return this;
};

To call the plugin, simply do the following (this is also the code you must place in script.js instead of the current one):

$('#countdown').countup();

Alternatively, if you wish to count up from a moment in the past:

$('#countdown').countup({
    start: new Date(2012, 10, 27, 15, 58, 21) //year, month, day, hour, min, sec
});

It’s a wrap!

Join our newsletter and get our PSDs!19,492 people learn about HTML5, JS and more. Join them!

by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

16 Comments

  1. Eugen says:

    Hi!
    I need the countdown only for minutes and seconds. How can I display only them (make days and hours invisible)?

    Best,
    Eugene

  2. Eugen says:

    RTFM! :)
    I´ve found it already :)
    I've just in the set

    .countDays{ display:none !important; }
    .countDiv0{ display:none !important; }
    .countHours{ display:none !important; }
    .countDiv1{ display:none !important; }

    in the jquery.countdown.css file.

    Best,
    Eugene

  3. samad says:

    hi, thank you for this article;
    i try this and it work properly in firefox and opera; but it dosent work in internet explorer!!!!
    can you help me? how can i run this in IE?

    1. Martin Angelov says:

      If you are using IE9, open the developer tools and look for error messages. This will give you clues on what might be wrong.

  4. Aayush says:

    Good Post,
    How do i make a timer which counts a specified time instead of this ?

  5. TTG says:

    Hi,
    Great plugin, but I have one issue: the days field only shows 2 digits - making the counter suitable for 3 months only (give or take). Any recommendation on how to add 2 digits to the days field, without screwing up too much of the code?
    Thanks

  6. Hariharan says:

    Hi,

    this is really a gud one..

    I just want to continue the timer from the last position.

    How can i do that ..??

    ie, let the value of my counter now in 00:00:00:20 and when i click start then the timer should start from this value (from 20sec..)..

    expecting your response..

    Cheers.,
    Hariharan

  7. Sanjay says:

    Hi,

    I like the script very much, but there is an issue. When i am calculating days from 1st Jan 2007, it went wrong. Bcoz in my case counter will be 2159:00:00:00

    but script displays 2 digits in days. Could you please help me resolving this.

    Sanjay

  8. davidkwan says:

    hi, very cool plugin. I try to use your count up and count down plugin in my mobile apps but failed to load. can you teach us how to make it on mobiel? i think many people asking for this issues.

  9. This is really good one, it would be great if it can count down. Like the time left to start website, so on

  10. ichtyo says:

    If I use in the script.js:

    $('#countdown').countup({start: new Date(2012, 10, 23, 15, 58, 21) //year, month, day, hour, min, sec});
    days ARE -4 -1 , NEGATIVE NUMBERS...

    1. PaulF says:

      Try declaring the date object like this:
      $('#countdown').countup({start: new Date("July 26, 2013 06:00:00");});

      Worked for me.

  11. nooshin says:

    hi
    first of all, thanks alot, this plugin is really cool. it's exactly what I need.
    how can i stop the counter when user clicking a button?

  12. BMW says:

    Great tutorial. I would like to replace the colons with Days, Hrs, Mins and Secs as appropriate. Is this possible? Any help would be appreciated. Thanks

    1. BMW says:

      Update..I'm actually able to add the Days, Hrs, Mins and Secs labels in the HTML. But when I include the HTML in my jsfiddle the script adds the counting digits in addition to an extra set which do nothing.

      (http://jsfiddle.net/bmwertman/qZUGH/)

  13. Ryan says:

    Is there a way to have the script start counting in milliseconds? I would like to add that column to the ones that are already there so that the milliseconds column would be switching numbers rapidly, giving a better sense of urgency when viewing the display.

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links