jquery.flipCountDown Demo Flip Count Down Retro Clock - Miaosha

Until the new year left

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"
	});
})

lg -large

md -middle, default

sm -small

xs -Extra small

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');
	}});
})