Javascript垂直時間軸是一種非常有用的工具，可以為網站和應用程序創建動態的時間軸效果。垂直時間軸可以用來展示歷史，時間線，事件和日程。一些常見的例子包括會議時間表，項目計劃或個人日程表。在本文中，將介紹如何使用Javascript實現一個垂直時間軸，并且提供一些實用的代碼示例。

第一步是創建一個基本的HTML結構，我們將使用一個無序列表來定義時間軸中的事件。每一個項都包含一個日期和一個標題（以及任何其他內容）。下面是一個簡單的HTML模板：

<ul>
<li>
<div class="date">Jan 1, 2021</div>
<div class="title">Event 1</div>
<p>Description 1</p>
</li>
<li>
<div class="date">Jan 15, 2021</div>
<div class="title">Event 2</div>
<p>Description 2</p>
</li>
<li>
<div class="date">Feb 1, 2021</div>
<div class="title">Event 3</div>
<p>Description 3</p>
</li>
</ul>

在這個例子中，我們使用了`

`標簽，每個`
• `包含了一個日期，標題和描述。時間軸的外觀和布局可以使用CSS樣式進行定義。這里是一個基本的CSS樣式基本，可開始使用：

  ul {
  list-style: none;
  margin: 0;
  padding: 0;
  }
  li {
  display: flex;
  margin-bottom: 20px;
  }
  .date {
  min-width: 80px;
  margin-right: 20px;
  text-align: right;
  font-size: 16px;
  font-weight: bold;
  color: #999;
  }
  .title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  }
  p {
  font-size: 16px;
  color: #555;
  line-height: 1.5;
  }

  隨著HTML結構和CSS樣式的創建完成，下一步是添加Javascript代碼來創建實際的時間軸。在本例中，我們將使用jQuery框架來幫助進行創建。以下是Javascript代碼示例：

  $(document).ready(function() {
  var items = $('ul li');
  var timeline = $('
  ');
  $.each(items, function(index, item) {
  var date = $(item).find('.date').text();
  var title = $(item).find('.title').text();
  var desc = $(item).find('p').html();
  var marker = $('
  ');
  var details = $('
  ');
  var content = $('
  ');
  marker.html(date);
  details.html(title + desc);
  content.append(marker).append(details);
  timeline.append(item);
  timeline.append(content);
  });
  $('body').append(timeline);
  });

  這個Javascript代碼示例創建了一個垂直時間軸，它遍歷HTML無序列表中的每個列表項，并將其數據提取到一個新創建的HTML中。它創建了一個`

  `元素（CSS樣式中有`.timeline`類），并將每個列表項的數據添加到其中。時間軸上將顯示每個事件的日期和詳細信息。這個簡單的Javascript代碼被設計成易讀，易于理解。它使用jQuery框架來操作DOM元素，因此任何人都可以簡單地改變樣式、添加動畫或對頁面進行任何其他實現的修改。

  在本文中，我們介紹了如何使用Javascript創建一個基于HTML和CSS的垂直時間軸。我們討論了HTML結構、CSS樣式和Javascript代碼，并提供了一些示例。這些示例演示了如何使用jQuery框架來操作DOM元素，并將事件數據提取到一個新的可視化組件中。無論您需要為個人或商務應用程序創建時間軸，Javascript垂直時間軸是一個真正有用的工具。

  上一篇discuz php debug

  下一篇discuz php 配置