JSFiddle - React, Tailwind, and code Playground
HTML
<div id="counter"></div>
<div class="desc">
<div>Days</div>
<div>Hours</div>
<div>Minutes</div>
<div>Seconds</div>
</div>
JavaScript
jQuery.fn.countdown = function(userOptions)
{
// Default options
var options = {
stepTime: 60,
// startTime and format MUST follow the same format.
// also you cannot specify a format unordered (e.g. hh:ss:mm is wrong)
format: "dd:hh:mm:ss",
startTime: "01:12:32:55",
digitImages: 6,
digitWidth: 53,
digitHeight: 77,
timerEnd: function(){},
image: "http://jquery-countdown.googlecode.com/svn/trunk/img/digits.png"
};
var digits = [], interval;
// Draw digits in given container
var createDigits = function(where)
{
var c = 0;
// Iterate each startTime digit, if it is not a digit
// we'll asume that it's a separator
for (var i = 0; i < options.startTime.length; i++)
{
if (parseInt(options.startTime[i]) >= 0)
{
elem = $('<div id="cnt_' + i + '" class="cntDigit" />').css({
height: options.digitHeight * options.digitImages * 10,
float: 'left', background: 'url(\'' + options.image + '\')',
width: options.digitWidth});
digits.push(elem);
margin(c, -((parseInt(options.startTime[i]) * options.digitHeight *
options.digitImages)));
digits[c].__max = 9;
// Add max digits, for example, first digit of minutes (mm) has
// a max of 5. Conditional max is used when the left digit has reach
// the max. For example second "hours" digit has a conditional max of 4
switch (options.format[i]) {
case 'h':
digits[c].__max = (c % 2 == 0) ? 2: 9;
if (c % 2 == 0)
digits[c].__condmax = 4;
break;
case 'd':
digits[c].__max = 9;
break;
case 'm':
case 's':
digits[c].__max = (c % 2 == 0) ? 5: 9;
}
++c;
}
else
elem = $('<div class="cntSeparator"/>').css({float: 'left'})
.text(options.startTime[i]);
...