Set up in 2 minutes

You only need to pass the target date and a timezone. You can also call a function when the target date has been reached.

Google Webfonts

Use Google Webfonts to change the font for the digits by yourself.

A lot of Options & a great API

Customize the countdown with some options to fit it by your needs. It's also coming with a great API.


The target date has been reached!




Choice a fill color




Code:
//html code
<div id="fancyCountdown"></div>
	              	
//js code
$('#fancyCountdown').fancyCountdown({
  fillColor: '#22292A', 
  year:2013, 
  month: 12, 
  day: 31, 
  hour: 0, 
  minute: 0, 
  second: 0, 
  timezone: 1
});

$('#set').click(function(){
  $.fancyCountdown.timezone($('#timezone').val());
  $.fancyCountdown.targetDate($('#year').val(), $('#month').val(), $('#day').val(), $('#hour').val(), $('#minute').val(), $('#second').val());		
});

$('#start').click(function(){
  $.fancyCountdown.start();			
});

$('#stop').click(function(){
  $.fancyCountdown.stop();			
});	


Available Options

Option Explanation Default Value
yearThe target year (4-digits)2012
monthThe target month (1-12)12
dayThe target day (1-31)31
hourThe target hour (0-23)0
minuteThe target minute (0-59)0
secondThe target second (0-59)0
Removed since V1.3
digitUnitWidth
The width of each digit unit60
Removed since V1.3
digitUnitHeight
The height of each digit unit80
Removed since V1.3
colonUnitWidth
The width of each colon unit20
Removed since V1.3
topDigitOffset
The offset between the current digit and the digit before it. Use it when you change the font or the font size.25
Removed since V1.3
bottomDigitOffset
The offset between the current digit and the digit after it. Use it when you change the font or the font size.24
timezoneThe timezone you would like to target. Read here more about timezones.(-12 up to 12)0
dayDigitsAmountThe amount of day digits, value between 1-3. E.g. you only would like to show 2 day digits, then enter 2.3
fillColorA string which contains the background color for each unit'#22292A'
autoStartEnable/disable auto-start (true or false)true
captionsEnable/disable the captions.true
digitsAn object to enable/disable each time unit (true or false).{days:true,hours:true, minutes:true, seconds:true}
captionTitlesAn object that stores the titles for the captions.{days: "Days", hours: "Hours", minutes: "Minutes", seconds: "Seconds"}
callbackA function that will be called when the target date is reachednull
Removed since V1.3
digitSize
The size of the digits in px.57
Since V1.2: overlayImageUrlThe URL of the overlay image.'images/fancyCountdown/overlay.png'
Since V1.3: borderColorThe color for the border.'#d5d5d5'


Methods

Method Explanation Parameter (Type)
$.fancyCountdown.start(); Starts the countdown. -
$.fancyCountdown.stop(); Stops the countdown. -
$.fancyCountdown.reset(); Resets the countdown. -
$.fancyCountdown.fillColor(color); Sets the background color for the digits. color (String) - A hex color value
$.fancyCountdown.targetDate(year, month, day, hour, minute, second); Sets a new target date.
  • year (Number): 4-digit value
  • month (Number): 1 to 12
  • day (Number): 1 to 31
  • hour (Number): 0 to 23
  • minute (Number): 0 to 59
  • second (Number): 0 to 59
$.fancyCountdown.timezone(value); Sets a new timezone. value (Number): -12 to 12