如何一步步制作一个JavaScript时间轴组件？

本文共计4490个文字，预计阅读时间需要18分钟。

目录+ 开头- 开发时间- 准备工作- 中间的空白线条- 时间刻度- 鼠标移动时显示时间- 拖动时时间轴- 调整时间分辨率- 绘制时间段- 多个时间轴- 显示自定义元素- 总结+ 开头- 文本给家长

目录

• 这是开头
• 开发时间
• 准备工作
• 中间的白色竖线
• 时间刻度
• 鼠标移动时显示所在时间
• 拖动时间轴
• 调整时间分辨率
• 绘制时间段
• 多个时间轴
• 显示自定义元素
• 总结

这是开头

本文给大家带来一个时间轴的组件开发教程，话不多说，先看动图：

主要功能就是可以拖动时间轴来定位当前时间，可以通过鼠标滚轮来修改当前时间分辨率，也支持显示时间段功能，动图未体现，可看下面的本次demo效果示例：

如果对canvas不太熟悉的话可以先看一下教程：www.runoob.com/tags/ref-canvas.html

接下来进入开发时间。