时间轴的实现

最新推荐文章于 2025-05-07 13:04:42 发布

程序媛夏天

最新推荐文章于 2025-05-07 13:04:42 发布

阅读量501

点赞数 3

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45822171/article/details/145149344

版权

需求背景：现在有一个时间比如13:00到17:00的时间段图，然后有个13:10到13:45的时间，如何定位画出时间段图。
要在前端用Vue和JavaScript实现一个可视化的时间段图，并在其中标示特定的时间段，你可以使用HTML的元素来绘制时间线，或者使用更高级的库如D3.js或Chart.js来简化图表的创建。这里我将展示如何使用简单的CSS和HTML来创建一个静态的时间段图，以及如何使用Vue动态更新这个图形。

使用CSS和HTML创建时间段图
首先，我们可以创建一个表示整个时间段（13:00到17:00）的条形，并且在这个条形中添加另一个表示子时间段（13:10到13:45）的小条形。
html

<div id="app">
    <div class="timeline-container">
        <div class="timeline" :style="{ width: timelineWidth }">
            <div class="sub-timeline" :style="{ left: subTimelineStart, width: subTimelineWidth }"></div>
        </div>
        <div class="labels">