多语言展示
当前在线:1132今日阅读:75今日分享:44

jQuery翻页式电子时钟插件的应用方法

FlipClock.js是一款实现翻页式效果的jQuery计时器插件。该计时器插件可以实现时分秒的计时,12小时制的计时,24小时制的计时,各种计数器效果,倒计数效果等等。现在有各种版本的计时器和计数器插件,但是它们大部分都是只实现了某个特定方面的内容。而FlipClock充分适应了各种需求,既可以做计数器,也可以做计时器。以下是FlipClock的一些应用场景和它的一些特点:作为时钟使用;作为计时器使用;作为倒计数器使用;FlipClock的样式使用纯CSS定制;语法干净整洁;所有的东西都抽象到一个可复用的对象上;提供完整的API来创建“Clock Faces”。
工具/原料

jquery.min.js、flipclock.js、flipclock.css文件

方法/步骤
1

引入文件新建一个HTML文件,引入jQuery和flipclock.js以及flipclock.css文件。该计时器插件需要jQuery 1.7.x+的支持。

2

HTML结构该计时器插件使用一个空的

即可。

3

JAVASCRIPTFlipClock需要jQuery来管理页面上的DOM元素。它是典型的jQuery插件,但是它返回的不是jQuery对象,而是一个FlipClock对象。

4

配置参数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。

5

主要方法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();

6

四种应用效果分别为:日时分秒计时、计数器效果、12小时制计时、24小时制计时。