一、拉取代码
git clone https://github.com/thelostword/timeline.git
二、npm install
三、npm run dev
四、效果
五、代码查看
<body>
<canvas id="Timeline"></canvas>
<div>
<p>当前时间:</p>
<strong id="TimeValue"></strong>
</div>
<script type="module">
import TimeLine, { format } from './dist/timeline.es.js';
const timeline = new TimeLine('#Timeline', {
fill: false,
zoom: 4,
});
timeline.draw({
currentTime: 1651827817000,
areas: [{
startTime: 1651827433000,
endTime: 1651829413000,
bgColor: '#f897aa'
},{
startTime: 1651829533000,
endTime: 1651832533000,
}],
});
const TimeValue = document.querySelector('#TimeValue');
TimeValue.textContent = format(timeline.getCurrentTime(), 'YYYY-MM-DD HH:mm:ss');
timeline.on('dragged', (timestamp) => {
TimeValue.textContent = format(timestamp, 'YYYY-MM-DD HH:mm:ss');
});
console.log(timeline);
</script>
</body>
扫一扫
5967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
