界面精美的时钟、定时器和倒计时 jQuery 插件:FlipClock.js

FlipClock.js 是一个制作精美时钟,定时器和倒计时的 jQuery 插件,并且可以完全通过 CSS 进行定制。有设置为自动启动,存在多种方法控制(启动,停止,getTime,setTime..),支持回调函数,此外,它还有一个全功能的API,能够进一步扩展功能。

界面精美的时钟、定时器和倒计时 jQuery 插件:FlipClock.js

FlipClock.js 演示

在开始介绍之前,首先看下 FlipClock.js 的演示:

RSS用户点击这里查看演示

使用 FlipClock.js

FlipClock.js 是一个 jQuery 插件,并且默认主题中的动画效果是基于 prefixfree.js,所以使用 FlipClock.js 需要需要加载 jQuery,prefixfree.js 和 flipclock.js,以及 FlipClock 的默认样式,所以一个基本的使用 FlipClock 的 HTML 文件如下:


<html>
	<head>
		<link rel="stylesheet" href="/assets/css/flipclock.css">
	</head>
	<body>
		<div class="your-clock"></div>
		
		<script src="/assets/js/libs/jquery.min.js"></script>
		<script src="/assets/js/flipclock/libs/prefixfree.min.js"></script>
		<script src="/assets/js/flipclock/flipclock.min.js"></script>
	</body>
</html>

然后通过下面两种方法初始化:


var clock = $('.your-clock').FlipClock({
// ... your options here
});

var clock = new FlipClock($('.your-clock'), {
// ... your options here
});

FlipClock 还有详细的设置,方法和回调函数,以及开发者 API 让你可以进行定义。

访问:FlipClock.js

标签:

热门文章