零基础，手把手教你使用原生js+css+html实现时序图

2024-02-09 22:47:02

打造交互式时序图：逐步指南

在当今快节奏的工作环境中，可视化工具已成为有效管理任务和跟踪进度的宝贵资产。时序图作为一种流行的可视化技术，通过将任务或事件按时间顺序排列，提供了清晰简洁的进度概述。本文将深入探讨如何使用 HTML、CSS 和 JavaScript 从头开始构建一个交互式时序图。

准备阶段

在着手构建时序图之前，确保你的电脑已具备以下必备软件：

文本编辑器： 如记事本、Sublime Text 或 Visual Studio Code
网页浏览器： 如 Chrome、Firefox 或 Edge

构建时序图

1. 创建 HTML 文件

首先，创建一个新的 HTML 文件并将其命名为 "index.html"。然后，添加以下代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="timeline"></div>
  <script src="script.js"></script>
</body>
</html>

这将创建一个基本 HTML 结构，包含一个 div 容器，该容器将充当时序图的画布。

2. 创建 CSS 文件

接下来，创建一个新的 CSS 文件并将其命名为 "style.css"。在其中添加以下代码：

#timeline {
  width: 100%;
  height: 500px;
  overflow: auto;
}

.timeline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.timeline-item-icon {
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 50%;
}

.timeline-item-content {
  flex: 1;
  padding-left: 10px;
}

.timeline-item-title {
  font-size: 18px;
  font-weight: bold;
}

.timeline-item-description {
  font-size: 14px;
}

此 CSS 定义了时序图及其项目的样式。

3. 创建 JavaScript 文件

最后，创建一个新的 JavaScript 文件并将其命名为 "script.js"。在此文件中，添加以下代码：

const timeline = document.getElementById('timeline');

const tasks = [
  {
    title: '任务1',
    description: '这是任务1的。',
    start: '2023-01-01',
    end: '2023-01-10',
  },
  {
    title: '任务2',
    description: '这是任务2的。',
    start: '2023-01-11',
    end: '2023-01-20',
  },
  // ...
];

tasks.forEach((task) => {
  const item = document.createElement('div');
  item.classList.add('timeline-item');

  const icon = document.createElement('div');
  icon.classList.add('timeline-item-icon');

  const content = document.createElement('div');
  content.classList.add('timeline-item-content');

  const title = document.createElement('h3');
  title.classList.add('timeline-item-title');
  title.textContent = task.title;

  const description = document.createElement('p');
  description.classList.add('timeline-item-description');
  description.textContent = task.description;

  content.appendChild(title);
  content.appendChild(description);

  item.appendChild(icon);
  item.appendChild(content);

  timeline.appendChild(item);
});