Back to Miaosha

jquery.flipCountDown Demo Flip Count Down Retro Clock

miaosha-admin/miaosha-admin-web/src/main/webapp/js/plugins/flipcountdown/index.html

latest1.6 KB
Original Source

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

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