本文目录

插件 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'
 });
});

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了