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. （转）Ctrl+H 浪潮Raid配置文档

    说明 本手册适用于LSI芯片Raid卡 包括但不限于Inspur 2008/2108 Raid卡.LSI 9240/9260/9261/9271 等Raid卡. 不同型号的Raid卡在某些功能上的支持 ...

  2. Python 数据结构 树

    什么是树 数是一种抽象的数据类型(ADT)或是作这种抽象数据类型的数据结构,用来模拟具有树状结构性质的数据集合,它是由n(n>1)的有限个节点和节点之间的边组成的一个有层次关系的集合. 树的组成 ...

  3. MySQL 基础 简单操作

    一.数据库基础 什么是数据库 数据库:保存有组织的数据的容器(通常是一个文件或一组文件). 表:是一种结构化的文件,可以用来存储数据(类似Excel表).数据库就是由成千上万个表组成. 什么事SQL ...

  4. PHP类名获取的几种方式及单例模式实现

    参考:https://www.cnblogs.com/water0729/p/5803217.html <?php class foo { static public function test ...

  5. 【RPC】综述

    RPC定义 RPC(Remote Procedure Call)全称远程过程调用,它指的是通过网络,我们可以实现客户端调用远程服务端的函数并得到返回结果.这个过程就像在本地电脑上运行该函数一样,只不过 ...

  6. nodejs+mysql入门实例（删）

    //连接数据库 var mysql = require('mysql'); var connection = mysql.createConnection({ host: 'bdm253137448. ...

  7. iOS UI进阶-4.0 地图与定位

    在移动互联网时代,移动app能解决用户的很多生活琐事,比如 导航:去任意陌生的地方 周边:找餐馆.找酒店.找银行.找电影院   在上述应用中,都用到了地图和定位功能,在iOS开发中,要想加入这2大功能 ...

  8. cocos2dx 游戏plist与png完美切成小图python代码

    首先需要一份python的切图程序: #python2.5 unpack_plist.py birdfly #! /usr/lical/bin/python import os,sys from xm ...

  9. 海量交通大数据应用平台MTDAP_nchang的经验记录

    WRONGTYPE Operation against a key holding the wrong kind of value 根本的就是redis同一个key的value值前后类型不一致,比如最 ...

  10. InstallShield2015制作安装包----------卸载后删除安装目录和文件

    卸载程序后,一般是需要将安装目录清除干净.但是,如果程序运行中有文件生成,这时InstallShield自带的卸载程序,不会卸载这些运行时生成的文件. 卸载不干净,可能会对下次程序的安装,和安装后的运 ...