当前位置： 首页 > news >正文

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

news 2026/2/10 17:42:34

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

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

相关文章：

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

用尽可能简单的代码&#xff0c;做个时间线或者时间轴展示功能&#xff0c;效果如图&#xff1a; 特点&#xff1a;纯DIVCSS构建&#xff0c;需要展示到什么进度&#xff0c;直接加active属性就行了。 还贴心给配了个setProgress(step)函数&#xff0c;功能太简单&#xff0c;…...

编程日记 2023/11/10 7:38:37

STM32笔记—定时器

目录 一、TIM简介 二、基本定时器&#xff08;TIM6和TIM7&#xff09; 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. 影子寄存…...

编程日记 2023/11/10 7:37:36

【力扣：1504】统计全1子矩阵

统计全1子矩阵个数 思路1&#xff1a;首先考虑深度优先模拟&#xff0c;从【0&#xff0c;0】出发向下、右扩展&#xff0c;符合条件res&#xff0c;最后输出res&#xff0c;比较直观&#xff0c;但重复进行了大量节点遍历操作&#xff0c;时间复杂度较高&#xff0c;数据量大时…...

编程日记 2023/11/10 7:36:35

排序算法之-选择

算法原理 在未排序的数列中找出最大&#xff08;或最小&#xff09;的元素&#xff0c;然后将其存入到已排序的数列起始位置&#xff0c;紧接着在剩余的未排序数列中继续查找最大&#xff08;或最小&#xff09;的元素&#xff0c;并将其放入到已排序的数列末尾&#xff0c;依…...

编程日记 2023/11/10 7:35:34

机器学习模板代码（期末考试复习）自用存档

机器学习复习代码 利用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是欧…...

编程日记 2023/11/10 7:33:32

使用sizeof()和strlen()去计算【数组】和【指针】的大小

文章目录 一、知识回顾1、回顾sizeof()、strlen的作用&#xff1a;2、数组和指针3、数组名 二、sizeof()、strlen()的使用区别1、注意区别&#xff1a;2、一维数组与一级指针3、二维数组与二级指针 三、总结回顾 一、知识回顾 1、回顾sizeof()、strlen的作用&#xff1a; siz…...

编程日记 2023/11/10 7:32:31

viple进阶4：打印空心三角形

题目&#xff1a;根据用户输入的行数n打印空心三角形&#xff0c;下图分别为n3、n4、n5和n10的效果图 第一步&#xff1a;观察效果图 输入的行数为3&#xff0c;打印结果就有3行&#xff1b;输入的行数为4&#xff0c;则打印结果就有4行&#xff1b;以此类推&#xff0c;输入的…...

编程日记 2023/11/10 7:30:29

Oauth2.0的内容

OAuth 2.0是一个授权协议&#xff0c;用于允许第三方应用程序访问用户在另一个应用程序上存储的受保护资源&#xff0c;而不需要将用户名或密码公开给第三方应用程序。 OAuth2.0基于客户端-服务器模型&#xff0c;通常需要三个主体&#xff1a;客户端、资源所有者和授权服务器…...

编程日记 2023/11/10 7:29:28

npm 下载包失败解决方案

1.【问题描述】使用 npm 下载vue项目依赖包时失败&#xff0c;版本不一致。 【解决方法】使用 npm install --force npm install --force 是一个命令行指令&#xff0c;用于在 Node.js 环境中使用 npm&#xff08;Node Package Manager&#xff09;安装包或模块。–force 参数表…...

编程日记 2023/11/10 7:28:27

C语言---插入排序、希尔排序、冒泡排序、选择排序、快速排序简单介绍

文章目录 插入排序希尔排序冒泡排序选择排序快速排序 本文主要介绍用C语言实现的一些排序方法&#xff0c;有插入排序、希尔排序、冒泡排序、选择排序和快速排序&#xff0c;文章中给出的例子都是按照升序排列的。 插入排序 若数组只有一个元素&#xff0c;自然不用排序&#…...

编程日记 2023/11/10 7:27:26

撸视频号收益这个副业靠谱吗？

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 昨天有个人问我说做视频号能月入过万吗? 我的回复是&#xff1a;99%的人不能。 但为什么会经常有人这么问呢&#xff0c;松松思考了一下&#xff0c;原因是最近很多人在晒视频号撸收益的项目&am…...

编程日记 2023/11/10 7:26:25

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( ) 从此映射中移除所有映射关系&#…...

编程日记 2023/11/10 7:24:23

ESP8266 WiFi模块快速入门指南

ESP8266是一种低成本、小巧而功能强大的WiFi模块&#xff0c;非常适合于物联网和嵌入式系统应用。本指南将为您提供关于ESP8266 WiFi模块的快速入门步骤和基本知识。 第一步&#xff1a;硬件准备 首先&#xff0c;您需要将ESP8266 WiFi模块与您的开发板连接。通常情况下&#…...

编程日记 2023/11/10 7:23:22

微信小程序将后端返回的图片文件流解析显示到页面

说明 由于请求接口后端返回的图片格式不是一个完整的url,也不是其他直接能显示的图片格式&#xff0c;是一张图片 后端根据模板与二维码生成图片,返回二进制数据 返回为文件流的格式,用wx.request请求的时候&#xff0c;就自动解码成为了下面这样的数据数据格式,这样的数据没…...

编程日记 2023/11/10 7:22:20

网络基础（1）

目录&#xff1a; 1.了解局域网&#xff08;LAN&#xff09;和广域网&#xff08;WAN&#xff09; 2.认识“协议” 3.浅谈OSI七层模型 4.网络传输的基本流程 5.路由器这个设备 ---------------------------------------------------------------------------------------…...

编程日记 2023/11/10 7:21:19

flink的AggregateFunction,merge方法作用范围

背景 AggregateFunction接口是我们经常用的窗口聚合函数&#xff0c;其中有一个merge方法&#xff0c;我们一般情况下也是实现了的&#xff0c;但是你知道吗&#xff0c;其实这个方法只有在你使用会话窗口需要进行窗口合并的时候才需要实现 AggregateFunction.merge方法调用时…...

编程日记 2023/11/10 7:20:18

Day25力扣打卡

打卡记录 寻找旋转排序数组中的最小值&#xff08;二分&#xff09; 链接 由于是旋转排序数组&#xff0c;所以整个数组有两部分是递增的&#xff0c;选取右侧最后元素&#xff0c;即可将整个数组分为大于该元素和小于该元素&#xff0c;碰头地段即为最小值。 class Solutio…...

编程日记 2023/11/10 7:19:18

SpringCloud - OpenFeign 参数传递和响应处理（全网最详细）

目录 一、OpenFeign 参数传递和响应处理 1.1、feign 客户端参数传递 1.1.1、零散类型参数传递 1. 例如 querystring 方式传参 2. 例如路径方式传参 1.1.2、对象参数传递 1. 对象参数传递案例 1.1.3、数组参数传递 1. 数组传参案例 1.1.4、集合类型的参数传递&#xf…...

编程日记 2023/11/10 7:18:16

Postgresql数据类型-布尔类型

前面介绍了PostgreSQL支持的数字类型、字符类型、时间日期类型&#xff0c;这些数据类型是关系型数据库的常规数据类型&#xff0c;此外PostgreSQL还支持很多非常规数据类型&#xff0c;比如布尔类型、网络地址类型、数组类型、范围类型、json/jsonb类型等&#xff0c;从这一节…...

编程日记 2023/11/10 7:17:15

SPASS-交叉表分析

导入数据 修改变量测量类型 分析->描述统计->交叉表 表中显示行、列变量通过卡方检验给出的独立性检验结果。共使用了三种检验方法。上表各种检验方法显著水平sig.都远远小于0.05,所以有理由拒绝实验准备与评价结果是独立的假设&#xff0c;即认为实验准备这个评价指标是…...

编程日记 2023/11/10 7:14:13

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2026/1/30 15:16:30

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2026/2/10 5:21:30

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2026/2/4 17:51:19

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2026/1/30 12:10:19

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2026/1/30 16:09:53

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2026/1/20 17:18:59

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

编程新知 2026/1/30 9:51:12