jquery.flipCountDown Plugin

Unusual retro clock count down plugin for jQuery

Until the new year left

Days Hours Minutes Seconds

Fast start

Add in html page


<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.flipcountdown.js"></script>

<link rel="stylesheet" type="text/css" href="jquery.flipcountdown.css" />

add div element

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

and init flipcountdown

$(function(){

	$('#retroclockbox1').flipcountdown();

})

Result

Settings

- Sizes (use bootstrap sizes notation)

$(function(){

	$("#retroclockbox1").flipcountdown({

		size:"lg"

	});

})
lg-large
md-middle, default
sm-small
xs-Extra small

- Counter

$(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

$(function(){

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

})

- offset timezone

$(function(){

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

})

- am,pm format hours

$(function(){

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

})

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

$(function(){

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

})

- set time

$(function(){

	$('#retroclockbox6').flipcountdown({time:function(){

		return new Date('5.10.2012 12:34:23');

	}});

})