jQuery Second Minute Countdown.

[Dave]

Well basically I struggled to find a decent javascript/jQuery countdown timer so I created a working yet most likely poor version to use myself. It's pretty simple and only currently supports minutes and seconds.

function countdown() {
var m = $('.min');
var s = $('.sec');	
if(m.length == 0 && parseInt(s.html()) <= 0) {
	$('.clock').html('Timer Complete.');	
}
if(parseInt(s.html()) <= 0) {
	m.html(parseInt(m.html()-1));	
	s.html(60);
}
if(parseInt(m.html()) <= 0) {
	$('.clock').html('<span class="sec">59</span> seconds.');	
}
s.html(parseInt(s.html()-1));
}
setInterval('countdown()',1000);

Then you have to structure the "timer" area like such.

<div class="clock">
<span class="min">6</span> minutes <span class="sec">15</span> seconds.
</div>

If your site supports timestamps this could be a nice small addition to make all the timers dynamic if you already haven't. I'd like to remind you this code is not perfect but it does it's job and works.

There are issues with multiple timers on a page at the moment.

[Danny696]

wouldnt i be better to use

var m = $('.min').val()

as i see your only using the value of it :/

[Dave]

wouldnt i be better to use

var m = $('.min').val()

as i see your only using the value of it :/

It works fine with .html, so I see no reason to change it.

[Danny696]

Would it not be faster, even very fractionally. as your grabbing it every time, not just once and storing it

[Djkanna]

Danny, it wouldn't work well with val() the way Dave is doing it.

Okay so for multiple timers we can do it like this;

[js]

$(document).ready (function () {

$('.clock').each(function () {

var clock = $(this);

setInterval(function () {

var m = $('.min', clock),

s = $('.sec', clock);

if (m.length == 0 && parseInt(s.html()) <= 0)

clock.html('Timer Complete.');

if (parseInt(s.html()) <= 0) {

m.html(parseInt(m.html() - 1));

s.html(60);

}

if (parseInt(m.html()) <= 0)

clock.html('<span class="sec">59</span> seconds.');

s.html(parseInt(s.html() -1));

}, 1000);

});

});

[/js]

HTML would be something along the lines of;

<p class="clock">
<span class="min">7</span> minutes and <span class="sec">30</span> seconds
</p>
<p class="clock">
<span class="min">3</span> minutes and <span class="sec">20</span> seconds
</p>

Bah code tags really don't like my 'tab' tabbing but meh.

[Djkanna]

I got rather bored, so I did a quick and dirty (very) plugin for this, also allows hours

[js]

(function($){

$.fn.countdown = function (options) {

options = $.extend({

start : '1,1,1',

countdownTitle: 'Till the end of the world',

countdownCompleteMsg: 'Timer has completed.'

}, options);

return this.each(function () {

var unit = options.start.split(','),

hour = unit[0],

min = unit[1],

sec = unit[2];

html = [

'<p class="clock">',

'<span class="hour">', hour,'</span> Hours ',

'<span class="min">', min,'</span> Minutes ',

'<span class="sec">', sec,'</span> Seconds ',

'<span>', options.countdownTitle,'</span>',

'</p>'

].join('');

$(html).appendTo(this);

var clock = $(this);

setInterval(function () {

var h = $('.hour', clock);

m = $('.min', clock),

s = $('.sec', clock);

if (parseInt(h.html()) <= 0 && parseInt(m.html()) > 0) {

clock.html('<span class="min">'+m.html()+'</span> Minutes <span class="sec">'+s.html()+'</span> seconds '+options.countdownTitle);

} else if (parseInt(h.html()) <= 0 && parseInt(m.html()) <= 0) {

clock.html('<span class="sec">'+s.html()+'</span> seconds ' + options.countdownTitle);

}

if (parseInt(h.html()) > 0 && parseInt(m.html()) <= 0 && parseInt(s.html()) <= 0) {

h.html(h.html() -1);

m.html(59);

s.html(59);

}

if (parseInt(m.html()) > 0 && parseInt(s.html()) <= 0) {

m.html(m.html() -1);

s.html(59);

}

if (h.length == 0 && m.length == 0 && parseInt(s.html()) == 0)

clock.html(options.countdownCompleteMsg);

else

s.html(parseInt(s.html() -1));

}, 1000);

});

}

})(jQuery);[/js]

Usage

[js]

$(elem).countdown(); //Will apply the default settings

$(elem).countdown({

start: '2,30,30'

}); //Will start the countdown at 2 hours 30 minutes and 30 seconds.

$(elem).countdown({

start: '0,40,0'

}); // Will start the countdown at 40 minutes.

//There's two other options 'countdownTitle' and 'countdownCompleteMsg'

//countdownTitle is what appears after the countdown, using the default as an example "10 seconds till the end of the world"

//countdownCompleteMsg is what appears when every thing hits 0, default is "Timer has completed".

[/js]

I may rework it and have separate options for hour/min/sec rather than split them, and clean it up a little and possibly have an option for transitions (fadeIn/Out etc).

It has the ability to have different counters, and also the same counter in different places (by adding the same classed element in different places);

[rulerofzu]

DJK and his very dirty jquery..... 8o

[Dave]

Very nice job DJK! I was going to get around to doing it one day but thanks for saying me the time :P

[Djkanna]

Still get round to doing it! ^.^

As said mines dirty&quick and needs improving (or scrapped) :P

[Harvey]

jQuery game countdown

Hi,

sorry for pop-up this theme after a year, I got finsh my jQuery game countdown, for those who need it:

https://github.com/Harveyhase68/jQuery.game.countdown or http://www.predl.cc (german)

Makes multiple timers with one timer (so website won't slow down), start/set/remove, tested with jQuery 1.8.2, simple display of 1d 1h 1m 1s, exact countdown with date, not with timeout 1000 = 1 sec, and of course gpl!

Any comments and issues appreciated!

yours

Alex

[Djkanna]

Hi,

sorry for pop-up this theme after a year, I got finsh my jQuery game countdown, for those who need it:

https://github.com/Harveyhase68/jQuery.game.countdown or http://www.predl.cc (german)

Makes multiple timers with one timer (so website won't slow down), start/set/remove, tested with jQuery 1.8.2, simple display of 1d 1h 1m 1s, exact countdown with date, not with timeout 1000 = 1 sec, and of course gpl!

Any comments and issues appreciated!

yours

Alex

Nice one, good job.