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
  });

 

[转载]FlipClock.js时钟,计数,3D翻转插件的更多相关文章

  1. FlipClock.js时钟,计数,3D翻转插件

    1.FlipClock.js能够自动定义计数,时钟的翻牌效果,调用简单,下面简单记录下用法 2.官网地址:http://www.flipclockjs.com/ 3.调用2个文件 <link h ...

  2. jquery.roundabout.js图片叠加3D旋转插件多功能图片翻转切换效果

    http://www.17sucai.com/pins/4880.html DEMO演示地址:http://www.17sucai.com/pins/demoshow/4880

  3. js简单 图片版时钟,带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  4. CSS3——3D翻转相册

    transform属性和transition过渡属性,结合jQuery代码实现翻转功能. <!DOCTYPE html> <html lang="en"> ...

  5. CSS3—3D翻转

    本案例主要是css3和html5,不会js也可以做动画◕.◕ 一.首先看下主要需要的样式: perspective transform transition position classList 就这 ...

  6. 基于html5顶部导航3D翻转展开特效

    基于html5顶部导航3D翻转展开特效是一款基于jQuery+HTML5实现的3D翻转网站导航菜单代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <header cla ...

  7. 一款纯css3实现的图片3D翻转幻灯片

    之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片.这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错.一起看下效果图: 在线预览   源码下载 实现的代码. ht ...

  8. 使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统——第四课

    序:这段时间忙于奔波,好久没有更新了,今天更新一下,继续上节课的完善讲解,算是对前段时间的一个总结吧.披星戴月的时光也算有点应用效果了. 对于webgl(three.js)性能这一块我在上节课< ...

  9. js 时钟特效

      时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的 款式一 借助jQuery插件实现 < ...

随机推荐

  1. 并发编程---线程---开启方式---进程线程的区别----Thread的其他属性

    线程 进程只是用来把资源集中到一起(进程只是一个资源单位,或者说资源集合)而线程才是cpu上的执行单位 1.同一个进程内的多个线程共享该进程内的地址资源 2.创建线程的开销远小于创建进程的开销(创建一 ...

  2. vue常用插件汇总

    UI-框架element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量 ...

  3. js动态规划---背包问题

    //每种物品仅有一件,可以选择放或不放 //即f[i][w]表示前i件物品恰放入一个容量为w的背包可以获得的最大价值. //则其状态转移方程便是:f[i][w]=max{f[i-1][w],f[i-1 ...

  4. Linux 文件 目录结构探索

    测试机用的是亚马逊云免费的那款,Amazon Linux AMI EC. 里面的Comment 在图上没有办法看,不过都是从网络上收录的,可以自行搜索. 目录 / 下面的目录 bin cgroup e ...

  5. Amazon RDS 上的 Microsoft SQL Server » 导入和导出 SQL Server 数据库

    导入和导出 SQL Server 数据库 Amazon RDS 支持使用完整备份文件 (.bak 文件) 对 Microsoft SQL Server 数据库进行本机备份和还原.您可以在单个便携式文件 ...

  6. [转]sqlserver2014两台不同服务器上数据库同步

    https://www.cnblogs.com/peng0731/p/7359465.html 同步了快一个月了,因为途中比较麻烦,第一次,遇到烦的地方就停下了,今天终于同步成功了,哈哈,下面我就来介 ...

  7. javascript另类方法高效实现htmlencode()与htmldecode()函数

    最常见的做法是采用正则表达式替换的方法,将特殊字符如 < > & 等进行替换,htmlencode的时候这样替换还比较容易,但发过来htmldecode的时候就不一定好用了,因为需 ...

  8. Elasticsearch5.x Head插件安装

    在5.0版本中不支持直接安装head插件,需要启动一个服务. 由于head插件本质上还是一个nodejs的工程,因此需要安装node,使用npm来安装依赖的包.(npm可以理解为maven) 1.安装 ...

  9. PO模型

    大神绕道而行,自我小白的笔记,仅此 一.创建文件夹,创建xxx.ini文件用来存放界面的定位元素,用 [界面_element]-->界面, 来划分界面界面元素,维护方便.定位元素的格式:  us ...

  10. time_t time()

    time_t  atime,  btime; time(&atime); btime = time(0); 两种方式效果一样.