北辰做网站wordpress 发布html
用尽可能简单的代码，做个时间线或者时间轴展示功能，效果如图：
特点：纯DIV+CSS构建，需要展示到什么进度，直接加active属性就行了。
还贴心给配了个setProgress(step)函数，功能太简单，没必要封装了。
到最后，jQuery也懒得用了。
上代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" ><title>time line</title></head><body><!-- 合肥向阳互联文化传媒有限公司 --><style>/* active颜色：#1890ff */.container-progressline{width: 70%; margin: 0 auto; font-size:12px; color: #333;}.progress-item{width:25%; height: 70px; background: #fff; position: relative; float: left;}.progress-line{height: 4px; width: 100%; background: #ddd; border:none; width:100%; position: absolute; top: 33px;}.container-progressline::after{content: " "; display: block; height: 0; width: 0; visibility: hidden; clear: both;}.progress-datetime{position:absolute; top: 11px; width: 100%; text-align: center;}.progress-title{position:absolute; bottom: 11px; width: 100%; text-align: center;}.progress-point{position: absolute; top: 27px; left: 45%; height: 10px; width: 10px; border-radius: 50%; z-index: 1; background: #ddd; border: 3px #fff solid;}.progress-item.active .progress-line{background: #1890ff;}.progress-item.active .progress-point{background: #1890ff;}</style><div class="container-progressline"><div class="progress-item active"><div class="progress-line"></div><div class="progress-point"></div><div class="progress-datetime">2023-12-31 00:00:00</div><div class="progress-title">这是这个节点的标题</div></div><div class="progress-item"><div class="progress-line"></div><div class="progress-point"></div><div class="progress-datetime">2023-12-31 00:00:00</div><div class="progress-title">这是这个节点的标题</div></div><div class="progress-item"><div class="progress-line"></div><div class="progress-point"></div><div class="progress-datetime">2023-12-31 00:00:00</div><div class="progress-title">这是这个节点的标题</div></div><div class="progress-item"><div class="progress-line"></div><div class="progress-point"></div><div class="progress-datetime">2023-12-31 00:00:00</div><div class="progress-title">这是这个节点的标题</div></div></div><script>/*** 设置进度*/function setProgress(step){var item;classes = document.getElementsByClassName('progress-item');if(step > classes.length){var strErr = '函数参数设置的步骤大于实际的步骤条目！';console.error(strErr);alert(strErr);return;}for(i = 0; i < classes.length; ++i){classes[i].classList.remove('active');//删除类名}for(i = 0; i < step; ++i){classes[i].classList.add('active');}}setProgress(3);</script></body>
</html>