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');
}});
})
================================================
FILE: miaosha-admin/miaosha-admin-web/src/main/webapp/js/plugins/flipcountdown/jquery.flipcountdown.css
================================================
.xdsoft_flipcountdown{display:inline-block;}
.xdsoft_flipcountdown .xdsoft_digit{float:left;background-repeat:no-repeat;}
.xdsoft_flipcountdown .xdsoft_clearex{clear:both;float:none;}
.xdsoft_flipcountdown >.xdsoft_digit{
background-position:0px 0px;
}
.xdsoft_flipcountdown >.xdsoft_digit.xdsoft_separator,.xdsoft_flipcountdown >.xdsoft_digit.xdsoft_dot{
opacity:0.9;
}
.xdsoft_flipcountdown.xdsoft_size_lg >.xdsoft_digit{
width:53px;
height:76px;
background-image:url(./img/digit-lg.png);
}
.xdsoft_flipcountdown.xdsoft_size_lg >.xdsoft_digit.xdsoft_space,
.xdsoft_flipcountdown.xdsoft_size_lg >.xdsoft_digit.xdsoft_separator,
.xdsoft_flipcountdown.xdsoft_size_lg >.xdsoft_digit.xdsoft_dot{
width:14px;
background-position:-19px -5082px;
}
.xdsoft_flipcountdown.xdsoft_size_lg >.xdsoft_digit.xdsoft_dot{
background-position:-41px -5082px;
}
.xdsoft_flipcountdown.xdsoft_size_lg >.xdsoft_digit.xdsoft_space{
background-position:-100px -5082px;
}
.xdsoft_flipcountdown.xdsoft_size_md >.xdsoft_digit{
width:36px;
height:51px;
background-image:url(./img/digit-md.png);
}
.xdsoft_flipcountdown.xdsoft_size_md >.xdsoft_digit.xdsoft_space,
.xdsoft_flipcountdown.xdsoft_size_md >.xdsoft_digit.xdsoft_separator,
.xdsoft_flipcountdown.xdsoft_size_md >.xdsoft_digit.xdsoft_dot{
width:10px;
background-position:-13px -3432px;
}
.xdsoft_flipcountdown.xdsoft_size_sm >.xdsoft_digit{
width:24px;
height:34px;
background-image:url(./img/digit-sm.png);
}
.xdsoft_flipcountdown.xdsoft_size_sm >.xdsoft_digit.xdsoft_space,
.xdsoft_flipcountdown.xdsoft_size_sm >.xdsoft_digit.xdsoft_separator,
.xdsoft_flipcountdown.xdsoft_size_sm >.xdsoft_digit.xdsoft_dot{
width:10px;
background-position:-6px -2310px;
}
.xdsoft_flipcountdown.xdsoft_size_xs >.xdsoft_digit{
width:16px;
height:23px;
background-image:url(./img/digit-xs.png);
}
.xdsoft_flipcountdown.xdsoft_size_xs >.xdsoft_digit.xdsoft_space,
.xdsoft_flipcountdown.xdsoft_size_xs >.xdsoft_digit.xdsoft_separator,
.xdsoft_flipcountdown.xdsoft_size_xs >.xdsoft_digit.xdsoft_dot{
width:5px;
background-position:-5px -1584px;
}
================================================
FILE: miaosha-admin/miaosha-admin-web/src/main/webapp/js/plugins/flipcountdown/jquery.flipcountdown.js
================================================
/**
* @preserve jQuery flipcountdown plugin v3.0.5
* @homepage http://xdsoft.net/jqplugins/flipcountdown/
* (c) 2013, Chupurnov Valeriy.
*/
(function($){
jQuery.fn.flipCountDown = jQuery.fn.flipcountdown = function( _options ){
var default_options = {
showHour :true,
showMinute :true,
showSecond :true,
am :false,
tzoneOffset :0,
speedFlip :60,
period :1000,
tick :function(){
return new Date();
},
autoUpdate :true,
size :'md',
beforeDateTime:false,
prettyPrint :function( chars ){
return (chars instanceof Array)?chars.join(' '):chars;
}
},
digitsCount = 66,
sizes = {
lg:77,
md:52,
sm:35,
xs:24
},
createFlipCountDown = function( $box ){
var $flipcountdown = $('