flipclock.js是一款jquery 3d翻转动画效果的时间显示插件-BFW插件库

flipclock.js是一款jquery 3d翻转动画效果的时间显示插件

使用方式：

第一步引入bfwone 加载依赖项jquery

第二步use插件及css和主题css

第三步配置参数

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

代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["flipclock", "flipclock"], function() {

                var date = new Date('2020-01-01 05:02:12 pm');
                clock = $('.your-clock').FlipClock(date, {
                    clockFace: 'TwentyFourHourClock'
                });

            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <body>
        <div class="your-clock"></div>

    </body>
</body>
</html>

官网：http://www.flipclockjs.com/