html+css+js实现step进度条效果
实现效果
代码实现
HTML部分
<div class="box"><ul class="step"><li class="circle actives ">1</li><li class="circle">2</li><li class="circle">3</li><li class="progress"></li></ul><ul class="text"><li class="item shows">步骤一</li><li class="item">步骤二</li><li class="item">步骤三</li></ul><button>下一步</button></div>
CSS部分
<style>*{padding: 0;margin: 0;box-sizing: border-box;}ul{list-style: none;}.box{padding: 25px;margin: 50px auto;width: 870px;height: 160px;border: 1px solid #c0c4cc;}.step{position: relative;display: flex;justify-content: space-between;height: 25px;line-height: 25px;}.step::before{content: '';position: absolute;top: 50%;transform: translateY(-50%);width: 100%;height: 3px;background-color: #c0c4cc;z-index: -2;}.step .circle{position: relative;width: 25px;height: 25px;border-radius: 50%;border: 2px solid #c0c4cc;text-align: center;background-color: #fff;line-height: 22px;color: #c0c4cc;}.step .circle.actives{position: relative;color: black;border: 2px solid black;font-weight: bold;}.step .circle.circle.active::before{content: '';position: absolute;left: -2px;top: -2px;width: 100%;height: 100%;border-radius: 50%;border: 2px solid #67c23a;text-align: center;background-image: url(./03.png);background-size: cover;line-height: 22px;transition:0.5s ease ;}.step .progress{position: absolute;top: 50%;transform: translateY(-50%);width:0%;background-color: #67c23a;height: 3px;z-index: -1;transition:0.5s ease;}.text{display: flex;justify-content: space-between;height: 38px;line-height: 38px;margin-bottom: 10px;}.text li{color:#c0c4cc ;font-weight: bold;}.text li.shows{color: black;font-weight: bold;}.text li.show{color: #67c23a;}button{cursor: pointer;padding: 8px 15px;background-color: #fff;color: #c0c4cc;border: 1px solid #c0c4cc;border-radius: 3px;}button:hover{border: 1px solid rgba(64, 158, 255, 0.1);background-color:rgba(64, 158, 255, 0.1);color:#409eff ;}button:disabled{background-color: #e0e0e0;cursor: not-allowed;}</style>
JS部分
<script>const btn=document.querySelector('button')const circles=document.querySelectorAll('.circle')const progress=document.querySelector('.progress')const items=document.querySelectorAll('.item')let i = -1btn.addEventListener('click',function(){i++if(i>=circles.length) return btn.disabled=trueif(i<circles.length){// 对号变化circles[i].classList.add('active')// 文字items[i].classList.add('show')// 进度条const actived=document.querySelectorAll('.active')progress.style.width=(actived.length-1) / (circles.length-1) * 100 + '%'}if(i<circles.length-1){circles[i+1].classList.add('actives')items[i+1].classList.add('shows')}})</script>
相关文章:

html+css+js实现step进度条效果
实现效果 代码实现 HTML部分 <div class"box"><ul class"step"><li class"circle actives ">1</li><li class"circle">2</li><li class"circle">3</li><li class&quo…...
OpenCV视频I/O(8)视频采集类VideoCapture之从视频源中读取一帧图像函数read()的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 抓取、解码并返回下一个视频帧。 cv::VideoCapture::read() 是 VideoCapture 类的一个成员函数,用于从视频源中读取一帧图像. 该方法…...

深度学习500问——Chapter17:模型压缩及移动端部署(2)
文章目录 17.4.6 低秩分解 17.4.7 总体压缩效果评价指标有哪些 17.4.8 几种轻量化网络结构对比 17.4.9 网络压缩未来研究方向有哪些 17.5 目前有哪些深度学习模型优化加速方法 17.5.1 模型优化加速方法 17.5.2 TensorRT加速原理 17.5.3 TensorRT如何优化重构模型 17.5.4 Tensor…...
【C#】DllImport的使用
DllImport 是 C# 中用于从非托管 DLL(动态链接库)中导入函数的一个特性。这个特性允许你在 .NET 应用程序中调用由其他语言编写的函数,如 C 或 C。使用 DllImport 可以让你重用现有的非托管代码,而不需要重新实现这些功能。 下面…...

基于 Redis 实现滑动窗口的限流
⏳ 限流场景:突发流量,恶意流量,业务本身需要 基于 Redis 实现滑动窗口的限流是一种常见且高效的做法。Redis 是一种内存数据库,具有高性能和支持原子操作的特点,非常适合用来实现限流功能。下面是一个使用 Redis 实现…...

Camera Raw:打开图像
在图像工作流程中,无论是 Raw 格式图像文件还是 JPEG、TIFF 文件,都可以先使用 Camera Raw 打开并调整后,再进入其它 Adobe 软件如 Photoshop 中进行进一步的编辑和处理。 一、打开 Raw 格式图像 1、通过 Adobe Bridge 打开 在 Adobe Bridge …...

RK3588主板PCB设计学习(六)
可以在其它层对过孔进行削盘处理, 可以看到,这里有些过孔用不上,在这一层进行了削盘处理: 对于这种电源层进行铺铜操作的时候,如果不进行削盘处理的话这些焊盘可能导致这个电源层面不完整,存在割裂的风险&a…...

论文阅读(十一):CBAM: Convolutional Block Attention Module
文章目录 IntroductionConvolutional Block Attention ModuleExperimentsConclusion 论文题目:CBAM: Convolutional Block Attention Module(CBAM:卷积注意力机制) 论文链接:点击跳转 代码链接:Git…...
【Kubernetes】常见面试题汇总(四十八)
目录 108.考虑一家拥有非常分散的系统的跨国公司,希望解决整体代码库问题。您认为公司如何解决他们的问题? 109.我们所有人都知道从单服务到微服务的转变从开发方面解决了问题,但在部署方面却增加了问题。公司如何解决部署方面的问题&#x…...

Qt Creator安卓环境配置【筑基篇】
1.前言 由于我的Qt Creator目前就先的14版本IDE老是存在各种莫名奇妙的bug,我都已经成为官方Qt Forum官方论坛的常客了。有一说一新版本的各种设置不小心误触是真的坑死人。不说了给我小主机配置安卓环境了。小主机系统版本window11-23H,Qt-Creator版本是13.01版本…...

利用SpringBoot构建高效社区医院平台
2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统,它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等,非常…...

【C++ 前缀和 数论】1590. 使数组和能被 P 整除|2038
本文涉及的基础知识点 C算法:前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 质数、最大公约数、菲蜀定理 LeetCode 1590. 使数组和能被 P 整除 给你一个正整数数组 nums,请你移除 最短 子数组(可以为 空)&am…...
外部引入的 JavaScript 放置位置
部引入的 JavaScript 通常有两种常见的放置位置,每个位置都有其优缺点,具体取决于页面的需求和性能优化目标: 1. 放在页面的 <head> 标签中 这种方式在 HTML 文档的 <head> 部分引入 JavaScript 文件。 <head><scrip…...

【tbNick专享】虚拟机域控、成员服务器、降级等管理
在 VMware 中完成四台域控服务器、一台成员服务器的创建、降级域控为成员服务器,并创建子域的操作。 1. 创建四台域控和一台成员服务器 1.1 在 VMware 中创建虚拟机 启动 VMware Workstation: 打开 VMware Workstation,点击 “创建新的虚拟…...
Raspberry Pi3B+之Rpanion(gst)和ffmpeg验证
Raspberry Pi3B之Rpanion-gst和ffmpeg验证 1. 源由2. 分析3. 环境搭建步骤1:安装镜像步骤2:系统更新步骤3:安装numpy组件步骤4:安装python3-picamera2组件步骤4:安装cv2组件步骤5:安装ffmpeg组件步骤6&…...
数据结构编程实践20讲(Python版)—04队列
本文目录 04 队列 QueueS1 说明S2 示例普通队列循环队列双端队列优先队列S3 问题:基于普通队列实现的打印机任务管理Python3程序S4 问题:使用循环队列管理玩家移动轨迹Python3程序S5 问题:使用双端队列来管理文档操作历史Python3程序S6 问题:使用优先队列管理车辆调度Pytho…...

Ubuntu开机进入紧急模式处理
文章目录 Ubuntu开机进入紧急模式处理一、问题描述二、解决办法参考 Ubuntu开机进入紧急模式处理 一、问题描述 Ubuntu开机不能够正常启动,自动进入紧急模式(You are in emergency mode)。具体如下所示: 二、解决办法 按CtrlD进…...
解决无网条件下离线安装缺失的python包
首先在有网的机器上使用conda create --name xx pythonx.x.x 命令创建一个和目标机器(无网)一样的环境 使用 下面命令 pip download opencv-python -d C:\Users\xuhaitao\Desktop\installer pip download pyinstaller -d C:\Users\xuhaitao\Desktop\installer 在目标…...

海外媒体投稿:如何运用3种国内外媒体套餐发稿突出重围?
在当今瞬息万变的经营环境中,突出重围营销推广是每家企业都需要思考的问题。为了能突出重围并提升影响力,国内外媒体套餐内容成为了一个非常受欢迎的挑选。下面我们就为大家讲解如何运用三种不同种类的国内外媒体套餐内容来推广突出重围。 2.微博营销新浪…...

Spring DI 笔记
目录 1.什么是DI? 2.依赖注入的三种⽅式 2.1属性注⼊ 2.2构造⽅法注⼊ 2.3Setter 注⼊ 2.4三种注⼊优缺点分析 3.Autowired存在问题 1.什么是DI? DI: 依赖注⼊ 依赖注⼊是⼀个过程,是指IoC容器在创建Bean时, 去提供运⾏时所依赖的资源,⽽资源指的…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...

龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...

MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能,我们需要对它的功能特点进行分析: 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具: mysql:关系型数据库&am…...

23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目,所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

python执行测试用例,allure报乱码且未成功生成报告
allure执行测试用例时显示乱码:‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
Java 二维码
Java 二维码 **技术:**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...