JavaScript 创建时间线

在本文中，我们将介绍如何使用HTML CSS和JavaScript创建时间线。时间线是事件以及它们发生的时间的视觉表示。完成后，JavaScript时间线将如下所示：

JavaScript 创建时间线

先决条件

此项目所需的先决知识包括：

方法

完成任务的方法如下：

使用HTML标签（如divs、ul和li）以及定义好的类名创建基本的时间轴结构。
使用CSS属性（如背景颜色、填充、边距、定位等）为项目添加样式。
在JavaScript中创建一个名为timelineArray的数组以存储时间和事件。
使用JavaScript数组的map()方法遍历并渲染HTML中的时间轴项，使用HTML DOM方法（如createElement和appendChild等）。

示例： 此示例演示了使用HTML、CSS和JS的基本JavaScript时间轴。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>JavaScript Timeline</title> 
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1" /> 
    <link rel="stylesheet" 
          href="style.css" /> 
</head> 
  
<body> 
    <ul class="timeline" 
        id="menu"></ul> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* Styling universal selector */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
  
/* Style body element */
body { 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    text-align: center; 
    justify-content: center; 
    background: hsl(113, 19%, 18%); 
    font-family: "Poppins", sans-serif; 
} 
  
/* Styling card container */
.card { 
    max-width: 20rem; 
    background: #e5e9f3; 
    margin: 0 1rem; 
    padding: 1rem; 
    box-shadow: 0 0 5px rgba(191, 189, 189, 0.2); 
    width: 95%; 
    border-radius: 0.5rem; 
    margin: 2%; 
    margin-bottom: 10%; 
} 
  
.timeline { 
    position: relative; 
    max-width: 1200px; 
    margin: 0 auto; 
} 
  
  
.timeline::after { 
    content: ""; 
    position: absolute; 
    width: 6px; 
    background-color: white; 
    top: 28px; 
    bottom: 75px; 
    left: 50%; 
    margin-left: -3px; 
} 
  
ul { 
    list-style: none; 
} 
  
.right { 
    text-align: left; 
    position: relative; 
    right: -185px; 
    list-style: none; 
} 
  
.left { 
    text-align: right; 
    position: relative; 
    left: -185px; 
    list-style: none; 
} 
  
.dotRight::after { 
    content: ""; 
    position: absolute; 
    width: 22px; 
    height: 22px; 
    left: -40px; 
    background-color: white; 
    border: 4px dashed #559cff; 
    top: 20px; 
    border-radius: 50%; 
    z-index: 1; 
} 
  
.dotLeft::after { 
    content: ""; 
    position: absolute; 
    width: 22px; 
    height: 22px; 
    right: -40px; 
    background-color: white; 
    border: 4px dashed #559cff; 
    top: 20px; 
    border-radius: 50%; 
    z-index: 1; 
}

Javascript

const timelineArray = [ 
    { 
        year: "1995", 
        eventt:  
"JavaScript Introduced by Brendan Eich at Netscape", 
    }, 
    { 
        year: "1997", 
        eventt:  
"ECMAScript created to Standardize JavaScript", 
    }, 
    { 
        year: "1999", 
        eventt:  
"ECMAScript3: Introduction of RegEx, try-catch", 
    }, 
    { 
        year: "2009", 
        eventt:  
"ECMAScript5: strict mode, Object method", 
    }, 
    { 
        year: "2015", 
        eventt:  
"ES6: introduced classes, Arraow functons, let/const variables ", 
    }, 
    { 
        year: "2016 Onwards", 
        eventt:  
"introducing features like async/await, spread/rest operators etc.", 
    }, 
]; 
  
function gfg() { 
    timelineArray.map((e, i) => { 
        let clss = "right"; 
        let dot = "dotRight"; 
        if (i % 2 == 0) { 
            clss = "left"; 
            dot = "dotLeft"; 
        } 
        const year = document.createElement("h3"); 
        year.innerText = e.year; 
        const eventt = document.createElement("p"); 
        eventt.innerText = e.eventt; 
        const item = document.createElement("div"); 
        item.appendChild(year); 
        item.appendChild(eventt); 
        item.classList.add("card"); 
        const contain = document.createElement("div"); 
        const li = document.createElement("li"); 
        contain.classList.add(dot); 
        contain.appendChild(item); 
        li.appendChild(contain); 
        li.classList.add(clss); 
        document.getElementById("menu").appendChild(li); 
    }); 
} 
gfg();

输出：

JavaScript 创建时间线