原生 JS+CSS+HTML 实现时序图的方法-前端开发

要使用原生 JS+CSS+HTML 实现时序图，需要经过以下步骤：

要使用原生 JS+CSS+HTML 实现时序图，需要经过以下步骤：

1. 定义 HTML 结构

一个时序图可以分为多个时序帧，每个时序帧可以包含多个参与者。因此，我们首先需要定义 HTML 结构来承载这些信息。比如，可以使用以下 HTML 结构：

<div class="sequence-diagram">
  <div class="sequence-frame">
    <div class="sequence-participant">A</div>
    <div class="sequence-participant">B</div>
    <div class="sequence-participant">C</div>
  </div>

  <div class="sequence-frame">
    <div class="sequence-participant">A</div>
    <div class="sequence-participant">B</div>
    <div class="sequence-participant">C</div>
  </div>

  <!-- more frames -->
</div>

在上面的 HTML 结构中，我们定义了一个 sequence-diagram 容器，用于包含整个时序图。每个时序帧都被定义为一个 sequence-frame，其中包含了多个参与者，即 sequence-participant。您可以添加更多 HTML 元素来构建您想要的时序图。

2. 使用 CSS 绘制样式

为了让我们的时序图更加美观、易于阅读，我们可以使用 CSS 属性定义样式。以下是一个基本的 CSS 样式示例：

.sequence-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sequence-frame {
  display: flex;
  align-items: center;
}

.sequence-participant {
  width: 100px;
  height: 50px;
  border: 1px solid #000;
  margin-right: 20px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
}

在上述 CSS 样式中，我们对容器 sequence-diagram 和参与者 sequence-participant 分别定义了样式。您可以修改这些样式以达到您自己的风格和需求。

3. 使用 JS 添加交互功能

最后，我们可以使用 JavaScript 为我们的时序图添加交互功能。例如，您可以使用事件监听器、动画等功能来实现以下功能：

点击某个参与者后，显示该参与者在该帧中的所有消息；
拖动某个参与者，调整其在序列图中的位置。

以下是一个示例 JavaScript 代码，实现了一个基本的事件监听器：

const sequenceFrames = document.querySelectorAll('.sequence-frame');
sequenceFrames.forEach(frame => {
  const participants = frame.querySelectorAll('.sequence-participant');
  participants.forEach(participant => {
    participant.addEventListener('click', () => {
      alert(`Clicked on participant ${participant.innerText}`);
    });
  });
});

在上面的 JavaScript 示例中，我们获取了所有的时序帧和参与者，为参与者的 click 事件添加了一个监听器，在点击时提示用户点击的是哪个参与者。您可以根据需求自行修改监听器的操作。

示例说明

下面为您提供两个示例说明。

示例一：瀑布流模式

以下是一个示例，展示了如何使用原生 JS+CSS+HTML 实现一个简单的瀑布流模式的时序图：

<div class="sequence-diagram">
  <div class="sequence-frame">
    <div class="sequence-participant">A</div>
    <div class="sequence-participant">B</div>
  </div>

  <div class="sequence-frame">
    <div class="sequence-participant">B</div>
    <div class="sequence-participant">C</div>
  </div>

  <div class="sequence-frame">
    <div class="sequence-participant">C</div>
    <div class="sequence-participant">D</div>
  </div>

  <div class="sequence-frame">
    <div class="sequence-participant">D</div>
    <div class="sequence-participant">E</div>
  </div>
</div>

.sequence-frame {
  display: flex;
  align-items: flex-start;
}

.sequence-participant {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  border: 1px solid #000;
  margin-right: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  transition: all 0.5s ease-out;
}

.sequence-participant.active {
  transform: translateY(70px);
  border-color: #f00;
  background-color: #f00;
  color: #fff;
}

const sequenceFrames = document.querySelectorAll('.sequence-frame');
sequenceFrames.forEach(frame => {
  const participants = frame.querySelectorAll('.sequence-participant');
  participants.forEach(participant => {
    participant.addEventListener('click', () => {
      participants.forEach(p => {
        p.classList.remove('active');
      });
      participant.classList.add('active');
    });
  });
});

在上面的示例中，我们为每个参与者添加了一个圆形的边框，用于区分不同的参与者。当用户点击某个参与者时，该参与者会“飞”到该时序帧的下方，并变为红色。您可以参考这个示例自己制作更加复杂的时序图。

示例二：双方通信模式

以下是另一个示例，展示了如何使用原生 JS+CSS+HTML 实现双方通信的时序图：

<div class="sequence-diagram">
  <div class="sequence-frame">
    <div class="sequence-participant">A</div>
    <div class="sequence-participant">B</div>
  </div>

  <div class="sequence-frame">
    <div class="sequence-participant">A</div>
    <div class="sequence-participant">B</div>
  </div>

  <div class="sequence-frame">
    <div class="sequence-participant">A</div>
    <div class="sequence-participant">B</div>
  </div>
</div>

.sequence-frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.sequence-participant {
  width: 100px;
  height: 50px;
  border: 1px solid #000;
  margin-right: 20px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  position: relative;
}

.sequence-participant:after {
  content: "";
  display: block;
  width: 20px;
  height: 10px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(-45deg);
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin-left: -10px;
}

.sequence-participant.active:after {
  border-color: #f00;
}

const sequenceFrames = document.querySelectorAll('.sequence-frame');
let activeParticipant = null;

sequenceFrames.forEach(frame => {
  const participants = frame.querySelectorAll('.sequence-participant');

  participants.forEach(participant => {
    if (participant.innerText === 'A') {
      participant.classList.add('active');
      activeParticipant = participant;
    } else {
      participant.classList.add('disabled');
    }
    participant.addEventListener('click', () => {
      if (!participant.classList.contains('disabled')) {
        participants.forEach(p => {
          p.classList.remove('active');
        });
        participant.classList.add('active');
        activeParticipant.classList.add('disabled');
        activeParticipant = participant;
      }
    });
  });
});

在上面的示例中，我们为每个参与者添加了一个箭头，用于表示其向另一个参与者发送信息。当用户点击某个参与者时，该参与者会变为红色，并且禁用上一个活动参与者，表示信息的发送方和接收方已经交换。您可以参考这个示例自己制作更加复杂的时序图。