以下是一个简单的
HTML、
CSS、JavaScript
时间轴示例：
HTML代码：
```
html
<!DOCTYPE
html>
<
html>
<head>
<title>Time Line Example</title>
<link rel="stylesheet" type="text/
css" href="style.
css">
</head>
<body>
<ul class="timeline"></ul>
<script src="script.js"></script>
</body>
</
html>
```
CSS代码：
```
css
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.timeline {
list-style-type: none;
display: flex;
flex-direction: column;
padding: 0;
}
.timeline li {
position: relative;
width: 100%;
padding: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.timeline li:nth-child(odd) {
background-color: #f2f2f2;
}
.timeline li:nth-child(even) {
background-color: #e6e6e6;
}
.timeline li::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
background-color: #ccc;
transform: translateX(-50%);
}
.timeline li:last-child::before {
height: 0;
}
.timeline li h2 {
margin: 0;
font-size: 24px;
font-weight: bold;
}
.timeline li p {
margin: 0;
font-size: 16px;
}
.timeline li .date {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: #ccc;
color: #fff;
padding: 5px 10px;
font-size: 14px;
border-radius: 5px;
}
.timeline li .content {
margin-left: 50px;
}
```
JavaScript
代码：
```javascript
//
时间轴数据
var timelineData = [
{
date: "2021-01-01",
title: "Event 1",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tristique nibh. Sed volutpat urna eget tellus molestie, et eleifend nulla laoreet. Integer non metus sit amet felis bibendum consectetur. ",
},
{
date: "2021-03-15",
title: "Event 2",
content: "Curabitur sed tortor vitae sapien sodales feugiat at vel ex. Phasellus vel nisi id nulla volutpat bibendum. Donec interdum finibus tellus, vel pellentesque sapien consectetur et. ",
},
{
date: "2021-06-30",
title: "Event 3",
content: "Pellentesque rutrum lacus eget suscipit pretium. Nullam eleifend enim nec tellus pharetra, quis blandit neque aliquet. Aenean eu dui a libero dapibus ultricies. ",
},
{
date: "2021-09-22",
title: "Event 4",
content: "Integer sollicitudin velit quis nunc pulvinar, ut maximus orci bibendum. Proin congue tellus sed enim rhoncus, vel molestie nisl bibendum. Nullam hendrerit felis ut dui bibendum, eu ultricies dolor consequat. ",
}
];
// 添加
时间轴事件
var timeline = document.querySelector(".timeline");
for (var i = 0; i < timelineData.length; i++) {
var eventData = timelineData[i];
var date = eventData.date;
var title = eventData.title;
var content = eventData.content;
var li = document.createElement("li");
li.inner
HTML = `
<div class="date">${date}</div>
<div class="content">
<h2>${title}</h2>
<p>${content}</p>
</div>
`;
timeline.appendChild(li);
}
```
以上
代码实现了一个简单的
时间轴，包括了
HTML、
CSS和JavaScript
代码。你可以将以上
代码复制到对应的文件中，然后通过浏览器打开
HTML文件来查看
时间轴效果。
这篇博客展示了如何使用HTML和CSS创建一个水平时间轴，适用于微信页面和PC端，无需jQuery。通过调整.filling_line的transform scaleX值来实现进度渲染。文章还提到了可以结合js来改变状态，并推荐了jQuery时间轴插件和其它CSS实现时间轴的方法。
最低0.47元/天 解锁文章
1170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
