手把手教你实现一个JavaScript时间轴组件

下面是“手把手教你实现一个JavaScript时间轴组件”的完整攻略：

1. 确定时间轴的基本结构

首先，我们需要确定时间轴的基本结构。时间轴通常由以下部分组成：

1. 时间轴的标题，用于简要介绍时间轴的内容；
2. 时间轴的标记，用于标注每个时间点的名称、时间、描述等信息；
3. 时间轴的箭头，表示时间轴的方向。

时间轴的基本HTML结构如下所示：

<div class="timeline">
  <h1 class="timeline-title">时间轴标题</h1>
  <ul class="timeline-markers">
    <li class="timeline-marker">
      <div class="timeline-marker-content">
        <h2>标记标题</h2>
        <p>标记描述</p>
        <span class="timeline-marker-time">时间戳</span>
      </div>
    </li>
  </ul>
  <div class="timeline-arrow"></div>
</div>

2. 定义样式

接下来，我们需要定义时间轴的样式。这里只提供基本样式，可以根据需要自行调整。主要包括以下几个部分：

1. 时间轴的颜色和宽度；
2. 时间轴的标题和标记的样式；
3. 时间轴的箭头的样式。

.timeline {
  position: relative;
  margin-bottom: 50px;
  padding: 50px 20px 0;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
}

.timeline-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
}

.timeline-markers {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.timeline-marker {
  position: relative;
}

.timeline-marker:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  background-color: #ccc;
  border: 2px solid #fff;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

.timeline-marker:hover:before,
.timeline-marker.active:before {
  background-color: #007bff;
  border-color: #007bff;
}

.timeline-marker:after {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 15px;
  width: 0;
  height: 100%;
  border-left: 2px solid #ccc;
}

.timeline-marker-content {
  position: relative;
  margin-bottom: 30px;
}

.timeline-marker-content h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.timeline-marker-content p {
  font-size: 14px;
  line-height: 1.5;
}

.timeline-marker-time {
  display: block;
  font-size: 14px;
  color: #ccc;
  margin-top: 10px;
}

.timeline-arrow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border: 20px solid transparent;
  border-top-color: #ccc;
  z-index: 2;
}

3. 定义JavaScript组件

最后，我们需要定义JavaScript组件，用于动态生成时间轴中的标记。主要包括以下几个功能：

1. 初始化时间轴，设置标题和箭头；
2. 添加标记，包括标记的标题、描述、时间等信息；
3. 切换标记，根据用户点击的标记切换状态；
4. 点击标记，滚动到对应标记的位置。

class Timeline {
  constructor(selector) {
    this.timeline = document.querySelector(selector);
    this.title = this.timeline.querySelector(".timeline-title");
    this.markers = this.timeline.querySelector(".timeline-markers");
    this.arrow = this.timeline.querySelector(".timeline-arrow");
    this.activeMarker = null;

    this.init();
  }

  init() {
    this.titleText = this.title.textContent;
    this.title.innerHTML = "";
    this.arrow.style.borderTopColor = getComputedStyle(this.arrow)["color"];

    window.addEventListener("resize", this.update.bind(this));
  }

  createMarker(options) {
    const marker = document.createElement("li");
    marker.classList.add("timeline-marker");

    const markerContent = document.createElement("div");
    markerContent.classList.add("timeline-marker-content");
    marker.appendChild(markerContent);

    const markerTitle = document.createElement("h2");
    markerTitle.textContent = options.title;
    markerContent.appendChild(markerTitle);

    const markerDescription = document.createElement("p");
    markerDescription.textContent = options.description;
    markerContent.appendChild(markerDescription);

    const markerTime = document.createElement("span");
    markerTime.classList.add("timeline-marker-time");
    markerTime.textContent = options.time;
    markerContent.appendChild(markerTime);

    marker.addEventListener("click", () => this.switchMarker(marker));
    this.markers.appendChild(marker);

    if (!this.activeMarker) {
      this.switchMarker(marker);
    }
  }

  update() {
    this.arrow.style.borderTopColor = getComputedStyle(this.arrow)["color"];

    if (this.activeMarker) {
      const offset =
        this.activeMarker.offsetTop - this.timeline.offsetTop - 30;
      this.timeline.scrollTop = offset;
    }
  }

  switchMarker(marker) {
    if (this.activeMarker) {
      this.activeMarker.classList.remove("active");
    }

    marker.classList.add("active");
    this.activeMarker = marker;
    this.update();
  }
}

const myTimeline = new Timeline(".timeline");

myTimeline.createMarker({
  title: "标记1",
  description: "这是标记1的描述",
  time: "2021-07-01",
});

myTimeline.createMarker({
  title: "标记2",
  description: "这是标记2的描述",
  time: "2021-07-03",
});

以上就是实现JavaScript时间轴组件的完整攻略。下面是两个示例：

示例一

const myTimeline = new Timeline(".timeline");

myTimeline.createMarker({
  title: "标记1",
  description: "这是标记1的描述",
  time: "2021-07-01",
});

myTimeline.createMarker({
  title: "标记2",
  description: "这是标记2的描述",
  time: "2021-07-03",
});

该示例创建一个时间轴，包含两个标记。第一个标记的标题为“标记1”，描述为“这是标记1的描述”，时间为“2021-07-01”；第二个标记的标题为“标记2”，描述为“这是标记2的描述”，时间为“2021-07-03”。

示例二

const myTimeline = new Timeline(".timeline");

myTimeline.createMarker({
  title: "标记1",
  description: "这是标记1的描述",
  time: "2021-07-01",
});

myTimeline.createMarker({
  title: "标记2",
  description: "这是标记2的描述",
  time: "2021-07-03",
});

myTimeline.createMarker({
  title: "标记3",
  description: "这是标记3的描述",
  time: "2021-07-05",
});

该示例创建一个时间轴，包含三个标记。第一个标记的标题为“标记1”，描述为“这是标记1的描述”，时间为“2021-07-01”；第二个标记的标题为“标记2”，描述为“这是标记2的描述”，时间为“2021-07-03”；第三个标记的标题为“标记3”，描述为“这是标记3的描述”，时间为“2021-07-05”。