jQuery Tutorial – The Final Countdown with jQuery.countdown

Rengga Dev – A simple and html agnostic date countdown plugin for jQuery.

All countdown styles in one

Take control of your DOM, register yours callbacks and start counting!

The Final Countdown is a plugin tailored to be used in any layout, without any CSS/HTML dependency. The goal was to fit and mimic differents countdown styles as you see out there in coupons and auction sites.

There are few ways to get started, the simplest example is as shown here, but we support many different countdown styles.

var labels = ['weeks', 'days', 'hours', 'mins', 'secs'],
  nextYear = (new Date('December 30, 2022 10:00:00')),
  template = _.template('<div class="time <%= label %>"><span class="count curr top"><%= curr %></span><span class="count next top"><%= next %></span><span class="count next bottom"><%= next %></span><span class="count curr bottom"><%= curr %></span><span class="label"><%= label.length < 6 ? label : label.substr(0, 3)  %></span></div>'),
  currDate = '00:00:00:00:00',
  nextDate = '00:00:00:00:00',
  parser = /([0-9]{2})/gi,
  $example = $('#main-example');
// Parse countdown string to an object
function strfobj(str) {
  var parsed = str.match(parser),obj = {};
  labels.forEach(function(label, i) {
    obj[label] = parsed[i]
  });
  return obj;
}
// Return the time components that diffs
function diff(obj1, obj2) {
  var diff = [];
  labels.forEach(function(key) {
    if (obj1[key] !== obj2[key]) {
      diff.push(key);
    }
  });
  return diff;
}
// Build the layout
var initData = strfobj(currDate);
labels.forEach(function(label, i) {
  $example.append(template({
    curr: initData[label],
    next: initData[label],
    label: label
  }));
});
// Starts the countdown
$example.countdown(nextYear, function(event) {
  var newDate = event.strftime('%w:%d:%H:%M:%S'),data;
  if (newDate !== nextDate) {
    currDate = nextDate;
    nextDate = newDate;
    // Setup the data
    data = {
      'curr': strfobj(currDate),
      'next': strfobj(nextDate)
    };
    // Apply the new values to each node that changed
    diff(data.curr, data.next).forEach(function(label) {
      var selector = '.%s'.replace(/%s/, label),
        $node = $example.find(selector);
      // Update the node
      $node.removeClass('flip');
      $node.find('.curr').text(data.curr[label]);
      $node.find('.next').text(data.next[label]);
      // Wait for a repaint to then flip
      _.delay(function($node) {
        $node.addClass('flip');
      }, 50, $node);
    });
  }
});