HTML实现时间轴跳转功能

HTML实现时间轴跳转功能

最近在做一个微信聊天数据备份的项目，导出的聊天记录保存为HTML格式与微信界面相似，较为美观。但在聊天数据太多的情况下，很难找到指定日期的消息，于是开发了时间轴功能，支持时间轴点击跳转至指定日期消息。

效果展示

1. 有消息的月份黑色显示、无消息的月份灰色显示、当前消息月份特殊标注

2. 点击年份自动折叠\释放月份

3. 点击年份、月份自动跳转至当月首条消息
   

代码实现

CSS代码

时间轴区域

这里用CSS代码定义了时间轴的区域，容器和年份、月份的CSS样式

.bar {
    width: 300px;
    position: relative;
    background-color: #ebebeb;
    border-right: solid 1px #d6d6d6;
    --left: 60%;
    --color: #0d5dff;
}
.timeline-area {
    flex: 1;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* padding-bottom: 10px; */
    padding-right: 5px;
    border: 1px solid #ccc;
}

.timeline-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 30% 0;
}

.timeline {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    overflow: hidden;
    overflow-y: auto;
    /* 添加 Flex 布局 */
    flex-direction: column;
    /* 将项目垂直排列 */
}

.timeline-item-year {
    height: 40px;
    position: relative;
    display: flex;
    /* line-height: 50px; */
}

.timeline-item-month {
    height: 25px;
    display: flex;
    /* line-height: 40px; */
}

添加虚线

这里用伪元素before实现时间轴的虚线，定义了年份、月份和当前月份的小圆点CSS样式

.timeline::before {
    content: "";
    position: absolute;
    left: var(--left);
    width: 1px;
    height: 600px;
    top: 20px;
    bottom: 0;
    background-image: linear-gradient(to bottom,
            rgba(144, 156, 173, 0.6) 60%,
            rgba(255, 255, 255, 0) 0%);
    background-position: left;
    background-size: 1px 5px;
    background-repeat: repeat-y;
}

.timeline-dot-month {
    left: var(--left);
    width: 7px;
    height: 7px;
    /* position: absolute; */
    position: relative;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #d8d8d8;
    background: white;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    line-height: 40px;
    margin-left: -3px;
}

.timeline-dot-year {
    left: var(--left);
    width: 10px;
    height: 10px;
    /* position: absolute; */
    position: relative;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #d8d8d8;
    background: black;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    line-height: 40px;
    margin-left: -4.5px;
}

.timeline-item-month.current .timeline-dot-month {
    width: 7px;
    height: 7px;
    background-color: var(--color);
    box-shadow: 0 0 4px var(--color);
    border: 1px solid white;
    margin-left: -3px;
}

设置字体样式

这里定义了年份、月份的间距、字体样式等

.timeline-item-year .timeline-right {
    position: relative;
    margin: 0px 0px 0px calc(var(--left) + 15px);
    /* background: greenyellow; */
    height: 40px;
    line-height: 40px;
}

.timeline-item-month .timeline-right {
    position: relative;
    margin: 0px 0px 0px calc(var(--left) + 15px);
    /* background: greenyellow; */
    height: 25px;
    line-height: 25px;
}

.timeline-right:hover {
    color: red;
    /* 设置字体颜色为红色，可以根据需求修改颜色值 */
}

.no-msg-month {
    color: #9e9898;
}

.hidden-month {
    display: none;
}

HTML代码

<div class="bar">
        <div class="timeline-area">
            <div class="timeline-wrapper">
                <div class="timeline" id="timeline">
                    <div id="2023">
                        <div class="timeline-item-year">
                            <div class="timeline-dot-year"></div>
                            <div class="timeline-right">2022</div>
                        </div>
                        <div class="timeline-item-month no-msg-month hidden-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">01月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month hidden-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">02月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month hidden-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">03月</div>
                        </div>
                        <div class="timeline-item-month hidden-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">04月</div>
                        </div>
                        <div class="timeline-item-month hidden-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">05月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month hidden-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">06月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month hidden-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">07月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month hidden-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">08月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month hidden-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">09月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month hidden-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">10月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month hidden-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">11月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month hidden-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">12月</div>
                        </div>
                    </div>
                    <div id="2023">
                        <div class="timeline-item-year">
                            <div class="timeline-dot-year"></div>
                            <div class="timeline-right">2023</div>
                        </div>
                        <div class="timeline-item-month no-msg-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">01月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">02月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">03月</div>
                        </div>
                        <div class="timeline-item-month current">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">04月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">05月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">06月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">07月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">08月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">09月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">10月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">11月</div>
                        </div>
                        <div class="timeline-item-month no-msg-month">
                            <div class="timeline-dot-month"></div>
                            <div class="timeline-right">12月</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>