1.FlipClock.js能够自动定义计数,时钟的翻牌效果,调用简单,下面简单记录下用法

3.调用2个文件

4.HTML

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('2014-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

});