阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.flipCountDown 中文 API 文档

      插件 jQuery.flipCountDown 中文 API 文档 https://github.com/xdan/flipcountdown

      时钟的复古风格

      快速启动

      添加 html 页面

      <script type="text/javascript" src="/jquery.min.js"></script>
      <script type="text/javascript" src="/jquery.flipcountdown.js"></script>
      <link rel="stylesheet" type="text/css" href="/jquery.flipcountdown.css" />
      

      添加 div 元素

      <div id="flipcountdownbox1"></div>
      

      和 init flipcountdown

      jQuery(function(){
        jQuery('#flipcountdownbox1').flipcountdown();
      })
      

      结果

      设置

      • 尺寸(使用自举尺寸表示法)
      jQuery("#flipcountdownbox1").flipcountdown({
        size:"lg"
      });
      
      lg -large
      md -middle,默认
      sm -small
      xs -Extra 小
      
      • 隐藏秒或分钟或小时
      jQuery("#flipcountdownbox1").flipcountdown({
        showHour:false,
        showMinute:false,
        showSecond:true
      });
      
      • 偏移时区
      jQuery("#flipcountdownbox3").flipcountdown({
        tzoneOffset:3,
        showSecond:false
      });
      
      • 12 格式小时
      jQuery("#flipcountdownbox4").flipcountdown({am:true});
      
      • 速度动画翻转数字(乘以 6 必须小于 1000)默认为 60
      jQuery("#flipcountdownbox5").flipcountdown({speedFlip:30});
      
      • 设置时间
      jQuery('#flipcountdownbox6').flipcountdown({tick:function(){
        return new Date('5.10.2012 12:34:23');
      }});
      
      • 柜台
      jQuery(function(){
        var i = 1;
        jQuery('#retroclockbox_counter').flipcountdown({
          tick:function(){
            return i++;
          }
        });
      })
      
      • 漂浮
      jQuery('#retroclockbox_float').flipcountdown({size:'lg',tick:22.3434});
      
      • 直到新年的例子
      jQuery(function(){
       var dt = new Date();
       jQuery('#new_year').flipcountdown({
        size:'lg',
        beforeDateTime:'1/01/' + (dt.getFullYear() + 1) + ' 00:00:01'
       });
      });
      
      目录
      本文目录
      目录