FlipClock.js时钟,计数,3D翻转插件
2024-09-29 05:52:14
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
});
最新文章
- DAO模型
- C#中的using关键字用法总结
- url-pattern
- Visual Studio安装项目中将用户选择的安装路径写入注册表的方法[转]
- Unity编程回忆录之控制物体移动
- Yii 设置 flash消息 创建一个渐隐形式的消息框
- Sql Server——基础
- 第十九章 Django的ORM映射机制
- linux小实验-考勤模拟程序
- easyui下载包详解
- 如何删除织梦系统power by dedecms
- js判断浏览器是否支持webGL
- IP通信基础课堂笔记----第四章(重点中的重点)
- 洛谷 P3965 [TJOI2013]循环格 解题报告
- java 实现单向链表
- java接口对接——别人调用我们接口获取数据
- jQuery一句话实现全选
- 【eclipse】svn在线安装
- Java中树和树的几种常规遍历方法
- Linux学习笔记 -- 硬链接与软连接(转)
热门文章
- [Django学习]Ajax访问静态页面
- c# dataTable 合并两个列到一个新列中
- java-基于JavaMail的Java邮件发送
- 修改 ueditor1_4_3-utf8-php 它的图片上传地址
- vlc player验证交换机igmp
- 转:Python操作SQLServer示例
- 【Java面试题】9 abstract class和interface有什么区别?
- u3d change terrain textrue&;height
- 解决导入protobuf源代码Unity报错的问题
- m_pRecordset->;Open