方法一:通过CDN在Head中调用:
<script src='https://unpkg.com/timeplayer'></script>
方法二:通过NPM使用:
安装:
npm install timeplayer
在JS中引入:
import Timeplayer from 'timeplayer';
<script src='https://unpkg.com/timeplayer'></script>
npm install timeplayer
import Timeplayer from 'timeplayer';
默认情况下通过
new Timeplayer(dom, {dates})
来实例化控件,其中 dates 为时间字符串组成的数组如:
["2019/10/02","2019/10/03","2019/10/04"]
See the Pen Timeplayer basic demo by mofei (@mofei) on CodePen.
如果需要显示的时间过多,Timeplayer会自动的将距离过近的时间点进行缩小显示以提高整体可用性,用户可以通过 pointSpace: Number
参数进行修改关键点之间的距离
See the Pen Timeplayer large dates demo by mofei (@mofei) on CodePen.
在深色背景的情况下,可以通过 theme: 'dark'
参数使用黑色主题
See the Pen Timeplayer dark theme demo by mofei (@mofei) on CodePen.
如果你对控件的颜色有更高的要求,你可以通过设置 colors 自由的配置每一个元素的颜色,具体可以参考CodePen中的注释
See the Pen Timeplayer dark theme demo by mofei (@mofei) on CodePen.
实例化控件之后,可以通过 on((index, value)=>{})
和 off()
方法监听控件的时间变化
See the Pen Timeplayer events demo by mofei (@mofei) on CodePen.