Best Period Picker

jquery.flipCountDown Plugin jQuery plugin flip count down timer,clock or counter

Unusual retro clock count down plugin for jQuery Source or Download

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

The result on the top of the page

comments powered by Disqus