要使用原生 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;
}
});
});
});
在上面的示例中,我们为每个参与者添加了一个箭头,用于表示其向另一个参与者发送信息。当用户点击某个参与者时,该参与者会变为红色,并且禁用上一个活动参与者,表示信息的发送方和接收方已经交换。您可以参考这个示例自己制作更加复杂的时序图。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生 JS+CSS+HTML 实现时序图的方法 - Python技术站