你好！这是我的第一篇博客。
公司项目遇到一个需求，前端需要使用到layui的时间线，我在时间线的基础上进行扩展，使其支持参数化的横向时间线。
数据模拟定义在js中，实际以您的数据源为主。
可以把代码粘至以下网址进行运行测试 layui在线编辑器
效果图
代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<link rel="stylesheet" href="../../../css/layuimini.css" media="all">
<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layuimini.css?v=2.0.4.2" media="all">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/themes/default.css" media="all">
<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<style type="text/css">
body {
}
.content {
width: 1000px;
height: auto;
margin: 0px 0 0 311px;
display: inline-block;
}
.contract {
width: 100%;
height: auto;
display: inline-block;
}
.contract .linesegs {
list-style-type: none;
float: left;
position: relative;
background-repeat: repeat-x;
height: 40px;
margin: 0px;
padding-left: 10px;
}
.linesegs li {
float: left;
width: 110px;
position: relative;
background-repeat: no-repeat;
}
.linesegs li .dashed:after {
content: '';
display: block;
border-top: 2px dashed #C9CDD4;
width: 100%;
height: 2px;
}
.linesegs li .solid:after {
content: '';
display: block;
border-top: 2px solid #41AE3C;
width: 100%;
height: 2px;
}
.linesegs li .radius:before, .linesegs li .c-radius:before {
content: '';
display: block;
position: relative;
width: 10px;
height: 10px;
top: 5px;
border-radius: 100%;
background-size: 10px 10px;
}
.linesegs li .radius:before {
background: #41AE3C;
}
.linesegs li .c-radius:before {
background: #000000;
}
.linesegs li .startdate {
width: 100%;
height: 1px;
margin-top: 10px;
font-size: 12px;
text-align: left;
position: relative;
left: -10px;
}
</style>
</head>
<body>
<div class="layui-container">
<div class="content">
<div class="contract">
<ul class="linesegs" id="timeline"></ul>
</div>
</div>
</div>
<script src="${pageContext.request.contextPath}/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
// 步骤 1: 定义数据
const stages = [
{ name: '需求分析', date: '2024-10-6' },
{ name: '产品设计', date: '2024-10-7' },
{ name: '研发', date: '2024-10-14' },
{ name: '验收', date: '' },
{ name: '投产', date: '' }
];
// 步骤 2: 获取时间线容器
const timelineContainer = document.getElementById('timeline');
const size=stages.length
// 找到最后一个有日期的阶段
let lastDateIndex = -1;
stages.forEach((stage, index) => {
if (stage.date) {
lastDateIndex = index;
}
});
// 步骤 3: 动态生成 HTML
stages.forEach((stage, index) => {
const li = document.createElement('li');
li.className = 'lineseg';
if (index <= lastDateIndex) { // 前面的阶段有日期
if (index !== lastDateIndex) {
li.innerHTML = `
<h3 class="startdate">${stage.name}</h3>
<br>
<div class="solid radius"></div>
<br>
<h3 class="startdate">${stage.date}</h3>
`;
} else if(index===size-1){
li.innerHTML = `
<h3 class="startdate">${stage.name}</h3>
<br>
<div class=" radius"></div>
<br>
<h3 class="startdate">${stage.date}</h3>
`;
}else{
li.innerHTML = `
<h3 class="startdate">${stage.name}</h3>
<br>
<div class="dashed radius"></div>
<br>
<h3 class="startdate">${stage.date}</h3>
`;
}
} else { // 后面的阶段没有日期
if (index === stages.length - 1) {
li.innerHTML = `
<h3 class="startdate">${stage.name}</h3>
<br>
<div class="c-radius"></div>
<br>
<h3 class="startdate"></h3>
`;
} else {
li.innerHTML = `
<h3 class="startdate">${stage.name}</h3>
<br>
<div class="dashed c-radius"></div>
<br>
<h3 class="startdate"></h3>
`;
}
}
timelineContainer.appendChild(li);
});
</script>
</body>
</html>