FlipClock.js时钟,计数,3D翻转插件
2023-09-14 08:58:51 时间
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
});
相关文章
- Three.js呈现3D效果机房–初步方案[通俗易懂]
- php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码[通俗易懂]
- 初识js中的闭包_Js闭包中变量理解
- 刷完15道js版dp题,面试再也不怕了
- JS面试题-js新增基本数据类型BigInt
- js定时器与延时器_JS做定时器倒计时
- 高德地图js api教程_高德地图sdk使用教程
- 无缝切地图的3D赛车游戏火了,小哥花16个月用JS打造,浏览器免费就能玩
- get两个js小技能——JS截取视频第一帧&图片转Base64
- 如何使用jscythe并通过Node.js的Inspector机制执行任意JS代码
- clipboard.js:最轻便的复制页面内容到剪切板的JS
- 使用html+css+js实现3D相册详解编程语言
- EL表达式在JS中使用时有无双引号的区别详解编程语言
- JS元素属性的获取和设置
- .js『在 Linux 中搭建 Node.js 的有趣之旅』(linuxinode)
- 利用 JS 实现 Redis 的连接(js连接redis)
- 使用 JS 操作 Redis:实现强大数据存储.(js调用redis)
- 使用JS控制Oracle数据库的更新(js控制oracle更新)
- 数据JS技术实现实时获取Oracle数据(js实时获取oracle)
- JavaScript探索之旅掌握Oracle和JS的完美融合(js与oracle)
- JS将文件传输至MySQL数据库(.js传文件至mysql)
- Oracle VM 3D 开启独特虚拟化之旅(oracle vm 3d)
- JS判断浏览器之Navigator对象
- js弹簧效果代码
- js获取坐标通过JS得到当前焦点(鼠标)的坐标属性
- 5秒后跳转到另一个页面的js代码
- JS简单的图片放大缩小的两种方法
- js获取当前地址JS获取当前URL的示例代码
- node.js中的path.delimiter方法使用说明