jQuery Countdown (hh:mm:ss) from Initial HTML Value

Question

I'm currently working on a auction site where I need to display a countdown from an initial HTML value, there will be several different instances on a page.

The value will just be a text string parsed from PHP in the format hh:mm:ss.

I've found loads of different countdown scripts but they're mostly for graphic representation and work from an initial value set solely in JS/jQ.

<span class="countdown">11:55:12<span>

I'm just looking for a simple solution to countdown to zero with a callback of some sorts if needed. I've tried numerous scripts but just can't seem to get a basic text function on multiple elements.

Any help appreciated!

Answer 1

There are multiple ways of doing this, but here is a simple jQuery function method...

 (function($){
   $.fn.extend({       
     startTimer:function(){

       // countdown elements    
       var _this = this;

       // for padding numbers with leading zero
       Number.prototype.pad=function(){
         return (this<10?'0':'')+this;
       }

       var computeAndDisplay=function(){
         //loop through countdown elements
         $(_this).each(function(){
           // get timestamp from ID attribute
           var timestamp = parseInt($(this).attr('id').split('_').pop())*1000;
           var differance = timestamp - new Date().getTime();
           var hours = 0;
           var minutes = 0;
           var seconds = 0;
           // if there is a positive difference
           if(differance > 0){
             //hours
             if(differance >= 3600000){
               hours = Math.floor(differance/3600000);
             }
             //minutes
             if(differance >= 60000){
               minutes = Math.floor(differance/60000)%60;
             }
             //seconds
             if(differance >= 0){
               seconds = Math.floor(differance/1000)%60;
             }
             $(this).html(hours.pad()+":"+minutes.pad()+":"+seconds.pad());
           }else{
             // if there is no positive difference, timer is done and you can
             // do whatever to that countdown element here
           }
         });
       };
       //start timer
       setInterval(computeAndDisplay,1000);
     }
   });
 })(jQuery);

This method just relies on ONE setInterval function that loops through the multiple countdowns, as opposed to using a separate setInterval call for each countdown instance. With this however, we should keep our initial timestamp value in the ID of each html element, so we can retrieve it each time.

<div class="countdown" id="cd_1_1332794014"></div>
<div class="countdown" id="cd_2_1332698014"></div>
<div class="countdown" id="cd_3_1332699014"></div>

The last bit of the ID is the unix timestamp from php, the middle part is irrelevant to functionality but exists to keep IDs unique.

To get timers to start you'd just call...

$(document).ready(function(){
  $('.countdown').startTimer();
});