原生 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日

相关文章

  • HTML中div嵌套div的margin不起作用的解决方法

    问题描述: 在HTML中,我们往往需要使用div嵌套div来进行页面布局。但是有时候,我们会发现,对外层div设置margin无效,原因是内层div的margin影响了外层div的margin。那么如何解决这个问题呢? 解决方法: 使用padding代替margin 我们可以对外层div设置padding来代替margin,这样就可以消除内层div对外层di…

    css 2023年6月10日
    00
  • 详解CSS中zoom属性或overflow:auto属性清除浮动的作用

    来详细讲解一下“详解CSS中zoom属性或overflow:auto属性清除浮动的作用”的完整攻略。 前言 在网页开发中,我们经常会使用浮动(float)属性来实现元素的排列。但是,使用浮动属性会使得父级元素的高度不能自适应子元素的高度,这就可能会造成排版上的问题。为了解决这个问题,我们可以使用CSS的清除浮动的方法。其中比较常用的是zoom属性和overf…

    css 2023年6月10日
    00
  • 手把手教你实现一个canvas智绘画板的方法

    手把手教你实现一个canvas智绘画板的方法 Canvas是HTML5中新增加的绘图标签,可以通过JavaScript脚本动态绘制图形,图形包括线条、路径、矩形、圆形、字符和图片等。本文将手把手教你实现一个canvas智绘画板的方法。 1. 准备工作 在编写代码之前,需要先准备好开发环境。我们需要一个文本编辑器,例如Visual Studio Code,以及…

    css 2023年6月9日
    00
  • 教你如何通过JavaScript读取元素的样式

    让我来为你详细讲解如何通过JavaScript读取元素的样式。 首先,我们需要了解两种读取元素样式的方法:使用DOM API和使用window.getComputedStyle方法。 使用DOM API读取元素的样式 我们可以通过DOM API来访问元素的内联样式和计算样式,这两种方法都可以帮助我们读取元素的样式。 访问元素的内联样式 内联样式是通过HTML…

    css 2023年6月9日
    00
  • 使用css画一个文件上传图案

    现在我将为你讲解使用CSS画一个文件上传图案的完整攻略。 1.确定设计风格 在开始之前,我们需要先确定文件上传图案的设计风格。这决定了我们使用哪些颜色,以及选择什么形状和符号。 通常,文件上传图案需要一个文件图标,可以使用伪元素和 CSS 自定义属性实现。在这个例子中,我们将使用一个简单的文件夹图标,使用伪元素 ::before 和 ::after 来实现。…

    css 2023年6月10日
    00
  • font-family 中文字体的英文名称小结

    关于“font-family 中文字体的英文名称小结”的问题,下面是一份完整攻略: 前言 在 web 开发过程中,使用适合的字体是非常重要的。但是,基于不同的操作系统以及浏览器,字体名称、编码以及支持情况都存在巨大的差异。因此,在选择字体的时候,有必要查找并了解目标字体的英文名称,以确保不同环境下字体的显示效果。 字体查找方法 在具体了解不同的字体名称之前,…

    css 2023年6月9日
    00
  • css给span加float:right右浮动后内容换行下移

    如果在网页中将一个span元素添加float: right属性进行右浮动时,如果该span元素中的内容过长,可能会出现内容换行导致下方的内容也随之下移的问题。以下是针对该问题的完整攻略。 1. 添加样式设置宽度 首先可以将该span元素设置一个固定的width属性,比如width: 100px。这样做的目的是让span元素不再自适应宽度,而是固定一个宽度,从…

    css 2023年6月10日
    00
  • Html5自定义字体解决方法

    Html5自定义字体解决方法攻略 在网页设计中,自定义字体能够为网页注入更多的个性化元素,提高用户体验。然而,网页默认字体的限制,使得使用自定义字体需要一些特殊的解决方案。下面就Html5自定义字体解决方法就进行详细阐述: 1. 使用@font-face 通过使用@font-face可以轻松地在网站中嵌入自定义字体。首先,需要获取自己需要使用的字体,将其转换…

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