jquery.flipCountDown Plugin

Page project | Download

Unusual retro clock count down plugin for jQuery

Until the new year left

Days	Hours	Minutes	Seconds

Fast start

Add in html page

<link rel="stylesheet" type="text/css" href="jquery.flipcountdown.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.flipcountdown.js"></script>

add div element

<div id="retroclockbox1"></div>

and init flipcountdown

jQuery(function($){
	$('#retroclockbox1').flipcountdown();
})

Result

Settings

- Sizes (use bootstrap sizes notation)

jQuery(function($){
	$("#retroclockbox1").flipcountdown({
		size:"lg"
	});
})

- Counter

jQuery(function($){
	var i = 1;
	$('#retroclockbox_counter').flipcountdown({
		tick:function(){
			return i++;
		}
	});
})

- Float

$('#retroclockbox_float').flipcountdown({size:'lg',tick:22.3434});

- Hide second or minute or hour

jQuery(function($){
	$('#retroclockbox1').flipcountdown({showHour:false,showMinute:false,showSecond:true});
})

- offset timezone

jQuery(function($){
	$('#retroclockbox3').flipcountdown({tzoneOffset:3,showSecond:false});
})

- am,pm format hours

jQuery(function($){
	$('#retroclockbox4').flipcountdown({am:true});
})

- speed animate flip digit (multiply 6 must by less than 1000) default 100

jQuery(function($){
	$('#retroclockbox5').flipcountdown({speedFlip:50});
})

- set time

jQuery(function($){
	$('#retroclockbox6').flipcountdown({time:function(){
		return new Date('5.10.2012 12:34:23');
	}});
})