Timeplayer

使用方法

方法一:通过CDN在Head中调用:

<script src='https://unpkg.com/timeplayer'></script>

方法二:通过NPM使用:

安装:
npm install timeplayer
在JS中引入:
import Timeplayer from 'timeplayer';

示例

1. 默认

默认情况下通过 new Timeplayer(dom, {dates}) 来实例化控件,其中 dates 为时间字符串组成的数组如: ["2019/10/02","2019/10/03","2019/10/04"]

通过CodePen调试 ⤵️

See the Pen Timeplayer basic demo by mofei (@mofei) on CodePen.

2. 大量日期

如果需要显示的时间过多,Timeplayer会自动的将距离过近的时间点进行缩小显示以提高整体可用性,用户可以通过 pointSpace: Number 参数进行修改关键点之间的距离

通过CodePen调试 ⤵️

See the Pen Timeplayer large dates demo by mofei (@mofei) on CodePen.

3. 修改主题

在深色背景的情况下,可以通过 theme: 'dark' 参数使用黑色主题

通过CodePen调试 ⤵️

See the Pen Timeplayer dark theme demo by mofei (@mofei) on CodePen.

4. 修改配色

如果你对控件的颜色有更高的要求,你可以通过设置 colors 自由的配置每一个元素的颜色,具体可以参考CodePen中的注释

通过CodePen调试 ⤵️

See the Pen Timeplayer dark theme demo by mofei (@mofei) on CodePen.

5. 监听事件

实例化控件之后,可以通过 on((index, value)=>{})off() 方法监听控件的时间变化

通过CodePen调试 ⤵️

See the Pen Timeplayer events demo by mofei (@mofei) on CodePen.