Need multiple instaces of the countdown in the same page? No problems.
To reset the countdowns .
<script type="text/javascript" charset="utf-8">
// Javascript
$(function() {
$('div[data-countdown]').each(function(i) {
var d, h, m, s,
toDate = $(this).data('until');
$(this).countdown(toDate, function(event) {
var timeFormat = "%d day(s) %h:%m:%s";
switch(event.type) {
case "days":
d = event.value;
break;
case "hours":
h = event.value;
break;
case "minutes":
m = event.value;
break;
case "seconds":
s = event.value;
break;
}
// Assemble time format
if(d > 0) {
timeFormat = timeFormat.replace(/\%d/, d);
timeFormat = timeFormat.replace(/\(s\)/, Number(d) == 1 ? '' : 's');
} else {
timeFormat = timeFormat.replace(/%d day\(s\)/, '');
}
timeFormat = timeFormat.replace(/\%h/, h);
timeFormat = timeFormat.replace(/\%m/, m);
timeFormat = timeFormat.replace(/\%s/, s);
// Display
$(this).html(timeFormat);
});
});
});
</script>
<!-- HTML -->
<div data-countdown="12/05/2011"></div>
<div data-countdown="15/06/2011"></div>
<div data-countdown="20/07/2011"></div>