• 用尽可能简单易懂的代码做个时间轴（时间线）

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

    特点：纯DIV+CSS构建，需要展示到什么进度，直接加active属性就行了。

    还贴心给配了个setProgress(step)函数，功能太简单，没必要封装了。

    到最后，jQuery也懒得用了。

    上代码：

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8" >
    5.         <title>time linetitle>
    6.     head>
    7.     <body>
    8.         
    9.         <style>
    10.             /* active颜色：#1890ff */
    11.             .container-progressline{width: 70%; margin: 0 auto; font-size:12px; color: #333;}
    12.             .progress-item{width:25%; height: 70px; background: #fff; position: relative; float: left;}
    13.             .progress-line{height: 4px; width: 100%; background: #ddd; border:none; width:100%; position: absolute; top: 33px;}
    14.             .container-progressline::after{content: " "; display: block; height: 0; width: 0; visibility: hidden; clear: both;}
    15.             .progress-datetime{position:absolute; top: 11px; width: 100%; text-align: center;}
    16.             .progress-title{position:absolute; bottom: 11px; width: 100%; text-align: center;}
    17.             .progress-point{position: absolute; top: 27px; left: 45%; height: 10px; width: 10px; border-radius: 50%; z-index: 1; background: #ddd; border: 3px #fff solid;}
    18.  
    19.             .progress-item.active .progress-line{background: #1890ff;}
    20.             .progress-item.active .progress-point{background: #1890ff;}
    21.  
    22.         style>
    23.         <div class="container-progressline">
    24.             <div class="progress-item active">
    25.                 <div class="progress-line">div>
    26.                 <div class="progress-point">div>
    27.                 <div class="progress-datetime">2023-12-31 00:00:00div>
    28.                 <div class="progress-title">这是这个节点的标题div>
    29.             div>
    30.             <div class="progress-item">
    31.                 <div class="progress-line">div>
    32.                 <div class="progress-point">div>
    33.                 <div class="progress-datetime">2023-12-31 00:00:00div>
    34.                 <div class="progress-title">这是这个节点的标题div>
    35.             div>
    36.             <div class="progress-item">
    37.                 <div class="progress-line">div>
    38.                 <div class="progress-point">div>
    39.                 <div class="progress-datetime">2023-12-31 00:00:00div>
    40.                 <div class="progress-title">这是这个节点的标题div>
    41.             div>
    42.             <div class="progress-item">
    43.                 <div class="progress-line">div>
    44.                 <div class="progress-point">div>
    45.                 <div class="progress-datetime">2023-12-31 00:00:00div>
    46.                 <div class="progress-title">这是这个节点的标题div>
    47.             div>
    48.         div>
    49.         <script>
    50.             /**
    51.              * 设置进度
    52.              */
    53.             function setProgress(step){
    54.                 var item;
    55.                 classes = document.getElementsByClassName('progress-item');
    56.                 if(step > classes.length){
    57.                     var strErr = '函数参数设置的步骤大于实际的步骤条目！';
    58.                     console.error(strErr);
    59.                     alert(strErr);
    60.                     return;
    61.                 }
    62.                 for(i = 0; i < classes.length; ++i){
    63.                     classes[i].classList.remove('active');//删除类名
    64.                 }
    65.                 for(i = 0; i < step; ++i){
    66.                     classes[i].classList.add('active');
    67.                 }
    68.             }
    69.  
    70.             setProgress(3);
    71.  
    72.         script>
    73.     body>
    74. html>

  • 相关阅读:
    C语言操作符详解（二）
    RocketMQ高性能核心原理与源码架构剖析
    Java对象内存结构和创建过程
    BPF 可移植性和 CO-RE（一次编译，到处运行）
    单片机第三季-第一课：STM32基础
    【数据挖掘】2022年2023届秋招知能科技公司机器学习算法工程师 笔试题
    [安卓] 列表之ArrayAdapter适配
    可编程直流电源的特点都有哪些呢?
    2022年ccpc绵阳站E题 E. Hammer to Fall（ 倒序dp + 分块优化）
    Nginx listen 监听端口详解
  • 原文地址：https://blog.csdn.net/qiminghang/article/details/134320894