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. SegmentedControlIOS使用

    代码: import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, SegmentedContr ...

  2. what's the python之函数及装饰器

    what's the 函数? 函数的定义:(return是返回值,可以没有,不过没有的话就返回了None) def wrapper(参数1,参数2,*args,默认参数,**kwargs): '''注 ...

  3. 线程安全问题.md

    # 线程安全问题: - 如果一个资源/变量,他对于多线程来讲,不用加锁也不会引起任何问题,则称为线程安全 - 线程不安全变量类型:list, set, dict - 线程安全变量类型: queue # ...

  4. 012-Future、FutureTask、CompletionService 、CompletableFuture

    一.概述 创建线程的两种方式,一种是直接继承Thread,另外一种就是实现Runnable接口.这两种方式都有一个缺陷就是:在执行完任务之后无法获取执行结果.如果需要获取执行结果,就必须通过共享变量或 ...

  5. javascript篇-slice(),splice(),split(),substring(),substr()的用法以及区别

    1.slice(),从已经有的数组中返回选定的元素, 使用范围是:Array,string 语法:obj.slice(start,end) 参数: start: 必需.规定从数组(字符串)的哪个ind ...

  6. centos7下git服务器端搭建

    git的安装: yum 源仓库里的 Git 版本更新不及时,最新版本的 Git 是 1.8.3.1,但是官方最新版本已经到了 2.9.2.想要安装最新版本的的 Git,只能下载源码进行安装. 1. 查 ...

  7. (转)fabric 一个链码如何调用另一个链码

    使用开发模式测试 可以使用~/hyfa/fabric-samples/chaincode-docker-devmode/启动fabric,具体过程略 用同一个链码注册2个服务 root@2ee7b51 ...

  8. 【LeetCode每天一题】Longest Palindromic Substring(最长回文字串)

    Given a string s, find the longest palindromic substring in s. You may assume that the maximum lengt ...

  9. sync修饰符的简易说明

    其实这个就说的很好了. sync会自动更新父组件的数据 原本valuechild 的值是222,父页面显示的222,把值传递给子组件 子组件也显示的222, 我点击子组件的按钮 把333传递给父组件, ...

  10. 【转】JsonPath教程

    https://blog.csdn.net/koflance/article/details/63262484 1. 介绍 类似于XPath在xml文档中的定位,JsonPath表达式通常是用来路径检 ...