jquery.flipCountDown Plugin jQuery plugin flip count down timer,clock or counter
Unusual retro clock count down plugin for jQuery Source
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="flipcountdownbox1"></div>and init flipcountdown
jQuery(function(){
jQuery('#flipcountdownbox1').flipcountdown();
})Result
Settings
- Sizes (use bootstrap sizes notation)
jQuery("#flipcountdownbox1").flipcountdown({
size:"lg"
});lg-large
md-middle, default
sm-small
xs-Extra small
- Hide second or minute or hour
jQuery("#flipcountdownbox1").flipcountdown({
showHour:false,
showMinute:false,
showSecond:true
});- offset timezone
jQuery("#flipcountdownbox3").flipcountdown({
tzoneOffset:3,
showSecond:false
});- 12 format hours
jQuery("#flipcountdownbox4").flipcountdown({am:true});- speed animate flip digit (multiply 6 must by less than 1000) default 60
jQuery("#flipcountdownbox5").flipcountdown({speedFlip:30});- set time
jQuery('#flipcountdownbox6').flipcountdown({tick:function(){
return new Date('5.10.2012 12:34:23');
}});- Counter
jQuery(function(){
var i = 1;
jQuery('#retroclockbox_counter').flipcountdown({
tick:function(){
return i++;
}
});
})
- Float
jQuery('#retroclockbox_float').flipcountdown({size:'lg',tick:22.3434});
- Until The New Year Example
jQuery(function(){
var dt = new Date();
jQuery('#new_year').flipcountdown({
size:'lg',
beforeDateTime:'1/01/' + (dt.getFullYear() + 1) + ' 00:00:01'
});
});