如何在html上动态显示时间轴

在HTML上动态显示时间轴是一种常见的需求，可以通过JavaScript和CSS来实现，以下是详细的技术教学，包括HTML、CSS和JavaScript的代码示例。

（图片来源网络，侵删）

我们需要创建一个简单的HTML结构来显示时间轴，在这个例子中，我们将使用一个<div>元素作为时间轴容器，并为其添加一个类名timeline，我们可以使用<ul>和<li>元素来表示时间轴上的条目，每个<li>元素将包含一个表示时间的<span>元素和一个表示事件的<div>元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Dynamic Timeline</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="timeline">
        <ul id="timelineitems">
            <!时间轴条目将动态生成 >
        </ul>
    </div>
    <script src="scripts.js"></script>
</body>
</html>

接下来，我们需要编写一些CSS样式来美化时间轴，在这个例子中，我们将为时间轴容器设置一个固定的宽度，为时间轴条目设置一个圆角边框，并为事件内容设置一些内边距，我们还将为时间轴条目添加一些过渡效果，使其在鼠标悬停时改变颜色。

/* styles.css */
.timeline {
    width: 100%;
    backgroundcolor: #f5f5f5;
    borderradius: 5px;
    overflow: hidden;
}
.timeline ul {
    liststyletype: none;
    padding: 0;
}
.timeline li {
    display: flex;
    alignitems: center;
    padding: 10px;
    borderbottom: 1px solid #ccc;
    transition: backgroundcolor 0.3s;
}
.timeline li:hover {
    backgroundcolor: #e0e0e0;
}
.timeline span {
    flexgrow: 1;
    marginright: 10px;
}

现在，我们需要编写一些JavaScript代码来动态生成时间轴条目，在这个例子中，我们将创建一个包含事件对象的数组，并为每个事件对象生成一个时间轴条目，每个事件对象将包含一个时间戳（表示事件发生的时间），一个标题和一个描述，我们将使用这些信息来填充时间轴条目的结构，并将其添加到页面上。

// scripts.js
const timelineItems = document.getElementById('timelineitems');
const events = [
    { timestamp: new Date(2022, 0, 1), title: 'New Year', description: 'Celebrate the start of a new year' },
    { timestamp: new Date(2022, 1, 1), title: 'Chinese New Year', description: 'Celebrate the lunar new year with family and friends' },
    { timestamp: new Date(2022, 4, 1), title: 'Earth Day', description: 'Raise awareness about environmental issues and promote sustainability' },
];
function updateTimeline() {
    timelineItems.innerHTML = ''; // 清空当前时间轴条目
    for (const event of events) {
        const li = document.createElement('li');
        const span = document.createElement('span');
        const content = document.createElement('div');
        content.classList.add('content'); // 为事件内容添加一个类名，以便我们可以应用CSS样式和动画效果
        span.textContent = formatDate(event.timestamp); // 格式化时间戳为可读格式（YYYYMMDD）
        content.textContent = event.title + ' ' + event.description; // 将事件标题和描述添加到事件内容中
        li.appendChild(span); // 将时间戳添加到时间轴条目中
        li.appendChild(content); // 将事件内容添加到时间轴条目中
        timelineItems.appendChild(li); // 将新生成的时间轴条目添加到页面上
    }
}
function formatDate(date) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1; // JavaScript中的月份是从0开始的，所以我们需要加1来获取正确的月份值
    const day = date.getDate();
    return ${year}${month < 10 ? '0' + month : month}${day < 10 ? '0' + day : day}; // 如果年份、月份或日期小于10，我们在前面添加一个零来确保它们是两位数的数字格式（YYYYMMDD）
}
updateTimeline(); // 初始化时间轴并显示当前时间范围内的事件（今天和未来的事件）

原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/380618.html

如何在html上动态显示时间轴

发表回复