用尽可能简单易懂的代码做个时间轴（时间线）_文华财经软件画时间轴的代码-CSDN博客

本文链接：https://blog.csdn.net/qiminghang/article/details/134320894

用尽可能简单的代码，做个时间线或者时间轴展示功能，效果如图：

特点：纯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>