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

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

  8. js 时钟特效

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

  9. 原生JS下拉加载插件分享。

    无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...

随机推荐

  1. spring boot 拦截器之WebMvcConfigurerAdapter

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   上一篇我们讲到了拦截器,我们也简单的讲解到了WebMvcConfigurerAdapter这个拦截器.本篇我们来对Web ...

  2. Convolution Network及其变种(反卷积、扩展卷积、因果卷积、图卷积)

    今天,主要和大家分享一下最近研究的卷积网络和它的一些变种. 首先,介绍一下基础的卷积网络. 通过PPT上的这个经典的动态图片可以很好的理解卷积的过程.图中蓝色的大矩阵是我们的输入,黄色的小矩阵是卷积核 ...

  3. IOC关注服务(或应用程序部件)是如何定义的以及他们应该如何定位他们依赖的其它服务

    IOC关注服务(或应用程序部件)是如何定义的以及他们应该如何定位他们依赖的其它服务.通常,通过一个容器或定位框架来获得定义和定位的分离,容器或定位框架负责: 保存可用服务的集合 提供一种方式将各种部件 ...

  4. Unity3D深入浅出 -创造 物理材质(Physics Materials)

    在Unity3d中已经配置好了5种常用的物理材质,Bouncy.Ice.Metal.Rubber.Wood,在菜单中依次选择Assets - Import Package - Physics Mate ...

  5. bootstrap -- css -- 图片

    图片样式 .img-rounded:添加 border-radius:6px 来获得图片圆角 .img-circle:添加 border-radius:500px 来让整个图片变成圆形. img-ci ...

  6. QButtonGroup:按钮类的非可视化容器,默认可实现按钮的子类实例的单选。

    QButtonGroup The QButtonGroup class provides a container to organize groups of button widgets. QButt ...

  7. c++ vector init操作

    1) string str[n]={"hello", ...}; vector<string> strArray(str,str+n); 2) vector<st ...

  8. 【Java面试题】6 判断下面代码是否有问题

    1. if(username.equals(“zxx”){} 2. int x = 1; return x==1?true:false; 1.一个变量直接调用equals方法会给程序带来安全隐患,直接 ...

  9. C#获取并修改文件扩展名的方法

    本文实例讲述了C#获取并修改文件扩展名的方法.分享给大家供大家参考.具体分析如下: 这里使用C#编程的方法改变文件扩展名的文件,必须使用Path类. Path类用来解析文件系统路径的各个部分.静态方法 ...

  10. 【R】array 2 string

    paste(1:10, collapse = '') http://stackoverflow.com/questions/2098368/how-do-i-concatenate-a-vector- ...