好用的翻牌效果插件 

 1 <html>
 2 
 3 <head>
 4     <link rel="stylesheet" href="../compiled/flipclock.css">
 5 
 6     <script src="../compiled/jquery-1.11.0.min.js"></script>
 7 
 8     <script src="../compiled/flipclock.js"></script>
 9 </head>
10 
11 <body>
12     <div class="em"> <span style="float: left;">事件数量</span>
13         <span class="clock" style="float: left;"></span>
14     </div>
15 
16     <div class="em">
17         <span style="float: left;">告警数量</span>
18         <span class="message" style="float: left;"></span>
19     </div>
20 
21 
22 
23 
24     <script type="text/javascript">
25         var clock;
26 
27         $(document).ready(function() {
28             var clock;
29             var message;
30             var num = 999;
31             clock = $('.clock').FlipClock({
32                 clockFace: 'Counter',
33                 // autoStart: true,
34                 setCountdown: true,
35             });
36             message = $('.message').FlipClock({
37                 clockFace: 'Counter',
38                 // autoStart: true,
39                 setCountdown: true,
40             });
41 
42 
43             clock.setTime(999);
44 
45 
46             $('ul').addClass("play");
47             setInterval(function() {
48 
49                 clock.reset();
50 
51                 clock.setTime(num);
52 
53                 $(" .flip-clock-wrapper").parent().eq(0).find("ul li a div div.inn").css("background-color", "red");
54                 $(" .flip-clock-wrapper").parent().eq(1).find("ul li a div div.inn").css("background-color", "yellow");
55                 $('ul').addClass("play");
56                 num1 = clock.getTime();
57 
58                 // if (num1.time > 1049) {
59                 //     num = num - 10;
60                 // } else if (num1.time === 100999) {
61                 //     clock.autoPlay == false;
62                 // } else {
63                 //     num = num + 8;
64                 // }
65                 $('ul').addClass("play");
66             }, 1000);
67             message.setTime(999);
68             $(" .flip-clock-wrapper").parent().eq(0).find("ul li a div div.inn").css("background-color", "red");
69             $(" .flip-clock-wrapper").parent().eq(1).find("ul li a div div.inn").css("background-color", "yellow");
70         });
71     </script>
72 
73 </body>
74 
75 </html>

 

参考文档：

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

 
复制代码

转载于:https://www.cnblogs.com/AaronBear/p/6515748.html

 
posted @ 2019-10-18 16:26  A-dabai  阅读(1076)  评论(0)  编辑  收藏  举报