1.FlipClock.js能够自动定义计数,时钟的翻牌效果,调用简单,下面简单记录下用法
2.官网地址:/
3.调用2个文件
<link href="/assets/css/flipclock.css" rel="stylesheet" type="text/css">
<script src="/assets/js/flipclock/flipclock.min.js" type="text/javascript:;"></script>
4.HTML
<body><div class="your-clock"></div> <!--你要调用的类名--></body>
5.js调用
//两种调用方法var clock = $('.your-clock').FlipClock({// ... your options here});var clock = new FlipClock($('.your-clock'), {// ... your options here});
6.flipclock.css修改基本样式
.flip-clock-wrapper ul(外层修改宽度，高度，字体大小，背景颜色，行高).flip-clock-wrapper .flip{外层阴影}.flip-clock-wrapper ul li(行高).flip-clock-wrapper ul li a div(字体大小).flip-clock-wrapper ul li a div div.inn(颜色,文字字体大小,圆角,文字阴影).flip-clock-wrapper ul.play li.flip-clock-before .up .shadow{上渐变颜色}.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow{下渐变颜色}*如果是时钟(有两个小圆点).flip-clock-dot.top{上圆点:修改宽度，高度，背景颜色，阴影}.flip-clock-dot.bottom{下圆点:修改宽度，高度，背景颜色，阴影}*顶上文字.flip-clock-divider .flip-clock-label{公共时钟文字}.flip-clock-divider.minutes .flip-clock-label{分钟文字}.flip-clock-divider.seconds .flip-clock-labell{秒钟文字}.flip-clock-wrapper ul li a div.up:after{中间横线}
7.时间显示类型(天,时,分,12小时制,24小时制,计数): clockFace:DailyCounter | HourlyCounter | MinuteCounter | TwelveHourClock | TwentyFourHourClock | Counter
var clock = new FlipClock($('.your-clock'), {//对应的是(天,时,分,12小时制,24小时制,计数)clockFace : DailyCounter | HourlyCounter | MinuteCounter | TwelveHourClock | TwentyFourHourClock | Counter});
//设置时间格式的时钟
var date = new Date('-01-01 05:02:12 pm');
clock = $('.clock').FlipClock(date, {
clockFace: 'TwentyFourHourClock'
});
8.通用计数
var clock = $('.clock').FlipClock(100, {clockFace: 'Counter',
autoStart : false
});setTimeout(function() {setInterval(function() {clock.increment();//increment();增加,decrement();减小,reset();重置}, 1000);});
9.常用API
var clock = new FlipClock($('.your-clock'), {//对应的是(天,时,分,12小时制,24小时制,计数)clockFace : Counter,//计数模式autoStart: false, //自动增量countdown: true,//倒计时向下minimumDigits : 5, //设定位数 callbacks: { //回调函数
start: function() { $('.message').html('The clock has started!'); },
stop: function() { $('.message').html('The clock has stopped!'); },
interval: function() { clock.increment(); } //destroy | create | init | interval | start | stop | reset
}
});
//更新覆盖重新调用 : loadClockFace方法
//原本是时钟调用,后改为计数调用
var clock = $('.clock').FlipClock(100, {
clockFace: 'HourlyCounter'
});
clock.loadClockFace('Counter', {
autoStart: true
});
