FlipClock.js是一款实现翻页式效果的jQuery计时器插件。该计时器插件可以实现时分秒的计时,12小时制的计时,24小时制的计时,各种计数器效果,倒计数效果等等。
它的效果和jQuery和CSS3超酷3D翻牌式倒计数特效类似,但功能更加强大。
现在有各种版本的计时器和计数器插件,但是它们大部分都是只实现了某个特定方面的内容。而FlipClock充分适应了各种需求,既可以做计数器,也可以做计时器。以下是FlipClock的一些应用场景和它的一些特点:
- 作为时钟使用。
- 作为计时器使用。
- 作为倒计数器使用。
- FlipClock的样式使用纯CSS定制。
- 语法干净整洁。
- 所有的东西都抽象到一个可复用的对象上。
- 提供完整的API来创建“Clock Faces”。
使用方法
该计时器插件需要jQuery 1.7.x+
的支持。使用时要先引入jQuery和flipclock.js以及flipclock.css文件。
<link rel="stylesheet" href="css/flipclock.css"> <script src="js/jquery.min.js"></script> <script src="js/flipclock.js"></script>
HTML结构
该计时器插件使用一个空的<div>
即可。
<html> <head> <link rel="stylesheet" href="/assets/css/flipclock.css"> </head> <body> <div class="your-clock"></div> <script src="/assets/js/libs/jquery.js"></script> <script src="/assets/js/flipclock/flipclock.min.js"></script> </body> </html>
JAVASCRIPT
FlipClock需要jQuery来管理页面上的DOM元素。它是典型的jQuery插件,但是它返回的不是jQuery对象,而是一个FlipClock对象。
var clock = $('.your-clock').FlipClock({ // ... your options here });
var clock = new FlipClock($('.your-clock'), { // ... your options here });
配置参数
-
autoStart:类型:
boolean
。如果设置为false
,时钟不会自动开始运行。默认值为true
。 -
countdown:类型:
boolean
。如果设置为true
,时钟会以向上翻页的形式执行计时动画。默认值为false
。 -
callbacks:类型:
object
。在各种时间事件被触发后返回的一个对象回调函数。 -
classes:类型:
object
。用于添加到DOM元素上的CSS类的对象。 -
clockFace:类型:
string
。用于创建所显示时钟的名称。默认值为HourlyCounter
。 -
defaultClockFace:类型:
string
。如果 clock face 没哟丠定义,使用该参数来作为默认的 clock face 。默认值为HourlyCounter
。 -
defaultLanguage:类型:
string
。默认使用的语言。默认值是english
。
方法
下面的方法属于 FlipClock.Factory
类的方法。
-
start():在
FlipClock
对象是上调用该方法会使时钟开始动画。clock.start(function() { // this (optional) callback will fire each time the clock flips });
-
stop():该方法会将时钟动画停止。
clock.stop(function() { // this (optional) callback will fire after the clock stops });
-
setTime():该方法会在初始化后设置时钟的时间。
clock.setTime(3600);
-
setCountdown():该方法会改变计数器的计数方式,向上或向下计数。
clock.setCountdown(true);
- getTime():在初始化后获取时钟的时间。 var time = clock.getTime(); // Returns the FlipClock.Time object
Callbacks
- destroy:当timer被销毁的时候触发。
- create:当 clock face 创建的时候触发。
- init:当FlipClock对象初始化的时候被触发。
- interval:在timer的每次时间间隔触发。
- start:当时钟开始动画的时候触发。
- stop:当时钟停止动画的时候触发。
- reset:当timer被重置的时候触发。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!