jQuery Countdown Timer to A Specific Time & Date

There are plenty of awesome countdown timers out there for jQuery – my favorite is the jquery-countdown plug-in. It’s got a bunch of configurable options, a great digits sprite to make it look polished, hosted by Google…but it’s missing one huge piece of functionality. Since it’s 100% client-side, every time you load it on a page it needs to be initialized with a startTime to begin it’s countdown.

For basic demonstration this works fine, counting down from whatever days, hours, minutes, & seconds you provide – but in pragmatic application most uses will be counting down to a specific date and time in the future dynamically based on what time it is right now. That is, not many people need a countdown timer that starts at 4 hours every time the page loads – the more common use case is that you have a specific date and time in the future that you want to display the difference between right now and that future date. This can be used for expiring in-store or online discounts, special events, or to build hype for major website changes or announcements.

Set ‘Countdown to Future Date’ Example and Code Snippet

To support this on a recent project for FATE I whipped up this short snippet to dynamically compute the date difference broken down by the datetime segments, the snippet you’ll need to include before you envoke the .countdown() call looks something like

var currentdate = new Date(); 
var futureDate = new Date("05/03/2013 18:30:00"); 
//get the date difference in ticks 
var timeDiff = futureDate - currentdate; 
timeDiff = timeDiff / 1000; 
var days = Math.floor(timeDiff / 86400); 
var hours = Math.floor(timeDiff / 3600) % 24; 
if(hours < 10) 
   hours = "0" + hours; 
var minutes = Math.floor(timeDiff / 60) % 60; 
   if(minutes < 10) 
      minutes = "0" + minutes; 
var seconds = Math.floor(timeDiff % 60); 
   if(seconds < 10) 
      seconds = "0" + seconds;

After you’ve including the computation of the days, hours, minutes, and seconds left until your futureDate you can pretty much just following the documentation for jQuery countdown timer and place the countdown timer in the element of your choosing like this

 $('#counter').countdown({ 
   startTime: days + ":" + hours + ":" + minutes + ":" + seconds, 
   digitImages: 6, 
   stepTime: 60, 
   digitWidth: 53, 
   digitHeight: 77,
   timerEnd: function() { }, 
   image: "http://jquery-countdown.googlecode.com/svn/trunk/img/digits.png" 
});

I totally would have forked and included this functionality adding an additional optional parameter to .countdown() called endTime but the repository’s on Google and closed to contribution. If you use this please take a screenshot and send it to me so I can include some other examples here!

Posted in Posts, Web Development

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

My Tweets