原生 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 为我们的时序图添加交互功能。例如,您可以使用事件监听器、动画等功能来实现以下功能:

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

以下是一个示例 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技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 如何为CheckBoxList和RadioButtonList添加滚动条

    为CheckBoxList和RadioButtonList添加滚动条是一个常见需求,可以通过CSS样式和JavaScript代码来完成。下面是实现该需求的详细步骤: 第一步:为控件添加CSS样式 首先,为要添加滚动条的控件添加CSS样式,以设置它们的高度、宽度、字体等。例如,设置控件的高度为200px,宽度为300px,字体为12px: .checkboxl…

    css 2023年6月10日
    00
  • 用js实现的DIV+CSS编辑器代码

    使用js实现的DIV+CSS编辑器可以帮助前端开发人员快速创建和修改网页的样式。以下是实现DIV+CSS编辑器代码的完整攻略。 HTML布局 首先,我们需要在HTML页面中定义一个容器DIV,用于显示编辑器。在这个DIV中创建两个子元素,分别是编辑区和预览区,如下所示: <div id="container"> <div…

    css 2023年6月10日
    00
  • jQuery编写设置和获取颜色的插件

    下面是关于“jQuery编写设置和获取颜色的插件”的完整攻略。 插件准备 在开始编写颜色插件之前,我们需要准备一些基本工具和必要设定。具体如下: 安装jQuery库 我们需要确保在网站中引入了jQuery库,可以通过CDN或下载方式引入,在代码中添加如下代码,确保jQuery库被成功加载: <script src="https://cdn.b…

    css 2023年6月9日
    00
  • 使用HTML5 Canvas API控制字体的显示与渲染的方法

    HTML5 Canvas API是一种强大的工具,可以帮助我们控制字体的显示和渲染。下面是使用HTML5 Canvas API控制字体显示和渲染的方法攻略: 1. 在canvas上绘制文本 Canvas可以让我们在画布上绘制文本。以下是绘制文本的基本方法: <canvas id="myCanvas"></canvas&g…

    css 2023年6月11日
    00
  • HTML设置超链接字体颜色和点击后的字体颜色

    HTML的超链接是网页制作中非常常用的元素,超链接字体颜色和点击后字体颜色是影响页面美观度的重要因素。下面是详细讲解“HTML设置超链接字体颜色和点击后的字体颜色”的完整攻略。 设置超链接字体颜色 通过style属性来设置超链接字体颜色。 html <a href=”http://www.example.com” style=”color:blue;”…

    css 2023年6月9日
    00
  • CSS3制作漂亮的照片墙的实现代码

    下面是CSS3制作漂亮的照片墙的完整攻略: 1.实现原理 照片墙的实现原理主要依赖于CSS3中的一些属性,如column-count、column-gap、transform、transition和box-shadow等,其中: column-count:用于设置元素在多列中进行分布。 column-gap:用于设置列与列之间的间隔。 transform:用…

    css 2023年6月11日
    00
  • asp.net在后端动态添加样式表调用的方法

    在ASP.NET后端动态添加样式表一般有以下两种常用方法: 1. 直接在后端代码中添加样式 示例代码如下: protected void Page_Load(object sender, EventArgs e) { Label myLabel = new Label(); myLabel.ID = "myID"; myLabel.Tex…

    css 2023年6月9日
    00
  • 编写适合所有项目的通用的reset.css

    编写适用于所有项目的通用的reset.css,可以方便有效地消除默认样式,避免浏览器兼容性问题,为实现前端页面的一致性提供便利。以下是简单的几个步骤: 1. 确定重置样式 首先,需要确定一些常规的HTML标记的样式。这包括HTML <body>, <h1>, <p>等元素。这个过程实际上就是消除默认样式,让我们可以从一个干…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部