用尽可能简单易懂的代码做个时间轴（时间线）
用尽可能简单的代码，做个时间线或者时间轴展示功能，效果如图：
特点：纯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>相关文章：
用尽可能简单易懂的代码做个时间轴（时间线）
用尽可能简单的代码，做个时间线或者时间轴展示功能，效果如图： 特点：纯DIVCSS构建，需要展示到什么进度，直接加active属性就行了。 还贴心给配了个setProgress(step)函数，功能太简单，…...
STM32笔记—定时器
目录 一、TIM简介 二、基本定时器（TIM6和TIM7） 1. TIM6和TIM7简介 2. TIM6和TIM7的主要特性 3. TIM6和TIM7的功能 3.1 时基单元 3.2 计数模式 3.3 时钟源 三、通用定时器 1. TIMx(2、3、4、5)简介 2. TIMx主要功能 3. 时钟选择 4. 影子寄存…...
【力扣：1504】统计全1子矩阵
统计全1子矩阵个数 思路1：首先考虑深度优先模拟，从【0，0】出发向下、右扩展，符合条件res，最后输出res，比较直观，但重复进行了大量节点遍历操作，时间复杂度较高，数据量大时…...
排序算法之-选择
算法原理 在未排序的数列中找出最大（或最小）的元素，然后将其存入到已排序的数列起始位置，紧接着在剩余的未排序数列中继续查找最大（或最小）的元素，并将其放入到已排序的数列末尾，依…...
机器学习模板代码（期末考试复习）自用存档
机器学习复习代码 利用sklearn实现knn import numpy as np import pandas as pd from sklearn.neighbors import KNeighborsClassifier from sklearn.model_selection import GridSearchCVdef model_selection(x_train, y_train):## 第一个是网格搜索## p是选择查找方式:1是欧…...
使用sizeof()和strlen()去计算【数组】和【指针】的大小
文章目录 一、知识回顾1、回顾sizeof()、strlen的作用：2、数组和指针3、数组名 二、sizeof()、strlen()的使用区别1、注意区别：2、一维数组与一级指针3、二维数组与二级指针 三、总结回顾 一、知识回顾 1、回顾sizeof()、strlen的作用： siz…...
viple进阶4：打印空心三角形
题目：根据用户输入的行数n打印空心三角形，下图分别为n3、n4、n5和n10的效果图 第一步：观察效果图 输入的行数为3，打印结果就有3行；输入的行数为4，则打印结果就有4行；以此类推，输入的…...
Oauth2.0的内容
OAuth 2.0是一个授权协议，用于允许第三方应用程序访问用户在另一个应用程序上存储的受保护资源，而不需要将用户名或密码公开给第三方应用程序。 OAuth2.0基于客户端-服务器模型，通常需要三个主体：客户端、资源所有者和授权服务器…...
npm 下载包失败解决方案
1.【问题描述】使用 npm 下载vue项目依赖包时失败，版本不一致。 【解决方法】使用 npm install --force npm install --force 是一个命令行指令，用于在 Node.js 环境中使用 npm（Node Package Manager）安装包或模块。–force 参数表…...
C语言---插入排序、希尔排序、冒泡排序、选择排序、快速排序简单介绍
文章目录 插入排序希尔排序冒泡排序选择排序快速排序 本文主要介绍用C语言实现的一些排序方法，有插入排序、希尔排序、冒泡排序、选择排序和快速排序，文章中给出的例子都是按照升序排列的。 插入排序 若数组只有一个元素，自然不用排序&#…...
撸视频号收益这个副业靠谱吗？
我是卢松松，点点上面的头像，欢迎关注我哦！ 昨天有个人问我说做视频号能月入过万吗? 我的回复是：99%的人不能。 但为什么会经常有人这么问呢，松松思考了一下，原因是最近很多人在晒视频号撸收益的项目&am…...
2、数组、Map+HashMap、Set+Hashset、Char和Character类、String类和Char类、Math类
数组 \\一个普通的长度为1的整数数组 Integer[] arr new Integer[1];\\一个普通长度为1的同时元素初始化为1的整数数组。 Integer[] arr new Integer[]{1};\\一个长度为0的空数组 Integer[] arr new Integer[0];Map 常见方法 void clear( ) 从此映射中移除所有映射关系&#…...
ESP8266 WiFi模块快速入门指南
ESP8266是一种低成本、小巧而功能强大的WiFi模块，非常适合于物联网和嵌入式系统应用。本指南将为您提供关于ESP8266 WiFi模块的快速入门步骤和基本知识。 第一步：硬件准备 首先，您需要将ESP8266 WiFi模块与您的开发板连接。通常情况下&#…...
微信小程序将后端返回的图片文件流解析显示到页面
说明 由于请求接口后端返回的图片格式不是一个完整的url,也不是其他直接能显示的图片格式，是一张图片 后端根据模板与二维码生成图片,返回二进制数据 返回为文件流的格式,用wx.request请求的时候，就自动解码成为了下面这样的数据数据格式,这样的数据没…...
网络基础（1）
目录： 1.了解局域网（LAN）和广域网（WAN） 2.认识“协议” 3.浅谈OSI七层模型 4.网络传输的基本流程 5.路由器这个设备 ---------------------------------------------------------------------------------------…...
flink的AggregateFunction,merge方法作用范围
背景 AggregateFunction接口是我们经常用的窗口聚合函数，其中有一个merge方法，我们一般情况下也是实现了的，但是你知道吗，其实这个方法只有在你使用会话窗口需要进行窗口合并的时候才需要实现 AggregateFunction.merge方法调用时…...
Day25力扣打卡
打卡记录 寻找旋转排序数组中的最小值（二分） 链接 由于是旋转排序数组，所以整个数组有两部分是递增的，选取右侧最后元素，即可将整个数组分为大于该元素和小于该元素，碰头地段即为最小值。 class Solutio…...
SpringCloud - OpenFeign 参数传递和响应处理（全网最详细）
目录 一、OpenFeign 参数传递和响应处理 1.1、feign 客户端参数传递 1.1.1、零散类型参数传递 1. 例如 querystring 方式传参 2. 例如路径方式传参 1.1.2、对象参数传递 1. 对象参数传递案例 1.1.3、数组参数传递 1. 数组传参案例 1.1.4、集合类型的参数传递…...
Postgresql数据类型-布尔类型
前面介绍了PostgreSQL支持的数字类型、字符类型、时间日期类型，这些数据类型是关系型数据库的常规数据类型，此外PostgreSQL还支持很多非常规数据类型，比如布尔类型、网络地址类型、数组类型、范围类型、json/jsonb类型等，从这一节…...
SPASS-交叉表分析
导入数据 修改变量测量类型 分析->描述统计->交叉表 表中显示行、列变量通过卡方检验给出的独立性检验结果。共使用了三种检验方法。上表各种检验方法显著水平sig.都远远小于0.05,所以有理由拒绝实验准备与评价结果是独立的假设，即认为实验准备这个评价指标是…...
douyin-downloader：构建高效抖音内容获取系统的终极解决方案
douyin-downloader：构建高效抖音内容获取系统的终极解决方案 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback…...
用Python爬虫+数据分析，量化一篇课文的情感变迁：《土地的讯息》文本挖掘实战
用Python量化《土地的讯息》情感变迁：从文本爬取到情感可视化的完整实战 清晨的阳光透过窗帘缝隙洒在书桌上，摊开的《土地的讯息》课文泛着微黄的光泽。这篇讲述泰国农民生活变迁的经典文本，不仅是语言学习的素材，更是一个绝佳的小…...
Noto Emoji：为什么全球化的数字沟通需要一个统一的表情符号标准？
Noto Emoji：为什么全球化的数字沟通需要一个统一的表情符号标准？ 【免费下载链接】noto-emoji Noto Emoji fonts 项目地址: https://gitcode.com/gh_mirrors/no/noto-emoji 在当今数字时代，表情符号已经成为全球用户沟通的基本语言元素…...
FinRobot开源框架：构建金融AI统一基础架构的实践指南
1. 项目概述：当金融遇上AI，一个开源框架的诞生 如果你在金融科技领域摸爬滚打过几年，一定会对“数据孤岛”和“模型黑箱”这两个词深恶痛绝。分析师们守着彭博终端、Wind、Tushare等一堆数据源，数据清洗和特征工程就能耗掉80%的时…...
极致轻松：5分钟掌握开源手绘白板的完整创作体验
极致轻松：5分钟掌握开源手绘白板的完整创作体验 【免费下载链接】excalidraw Virtual whiteboard for sketching hand-drawn like diagrams 项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw 你是否曾为寻找一个既美观又实用的绘图工具而烦恼&a…...
还在为Navicat试用期烦恼？这个工具让你告别14天限制
还在为Navicat试用期烦恼？这个工具让你告别14天限制 【免费下载链接】navicat_reset_mac navicat mac版无限重置试用期脚本 Navicat Mac Version Unlimited Trial Reset Script 项目地址: https://gitcode.com/gh_mirrors/na/navicat_reset_mac 想象一下这样…...
从智能家居到工业4.0：上位机/下位机架构如何塑造万物互联？以Node-RED和MQTT为例
从智能家居到工业4.0：上位机/下位机架构如何塑造万物互联？以Node-RED和MQTT为例 在智能家居的灯光自动调节中，工业流水线的机械臂控制里，或是农业大棚的温湿度监控系统背后，都藏着一套经典的协作模式——上位机与下位机…...
WindowResizer：彻底解放你的Windows窗口管理自由
WindowResizer：彻底解放你的Windows窗口管理自由 【免费下载链接】WindowResizer 一个可以强制调整应用程序窗口大小的工具 项目地址: https://gitcode.com/gh_mirrors/wi/WindowResizer 还在为那些顽固的、无法调整大小的应用程序窗口而烦恼吗？W…...
Austroads 高信号交叉口：文献综述与现行实践总结（英）2026
这份由澳新道路协会 Austroads 2026 年发布的技术报告，系统梳理了限速＞50km/h 高等级道路上抬升式信号控制交叉口的研究成果、设计规范、实施经验与现存问题，核心目标是推广该安全设施、完善设计指南、落实安全系统（Safe System&a…...
从零部署ToolJet：开源低代码平台构建内部工具实战指南
1. 项目概述：从零到一，用开源低代码平台构建你的第一个内部工具 如果你是一名开发者、产品经理，或者是一个小团队的负责人，大概率遇到过这样的场景：业务部门提了一个紧急需求，比如需要一个简单的数据看板来…...