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时, 去提供运⾏时所依赖的资源,⽽资源指的…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...

el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935,SRS管理页面端口是8080,可…...
数据库分批入库
今天在工作中,遇到一个问题,就是分批查询的时候,由于批次过大导致出现了一些问题,一下是问题描述和解决方案: 示例: // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

HashMap中的put方法执行流程(流程图)
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中,其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下: 初始判断与哈希计算: 首先,putVal 方法会检查当前的 table(也就…...

Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会
在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

图解JavaScript原型:原型链及其分析 | JavaScript图解
忽略该图的细节(如内存地址值没有用二进制) 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么:保存在堆中一块区域,同时在栈中有一块区域保存其在堆中的地址(也就是我们通常说的该变量指向谁&…...

AxureRP-Pro-Beta-Setup_114413.exe (6.0.0.2887)
Name:3ddown Serial:FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名:Axure 序列号:8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...