1.FlipClock.js能夠自動定義計數,時鍾的翻牌效果,調用簡單,下面簡單記錄下用法
2.官網地址:http://www.flipclockjs.com/
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('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
});