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

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()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 抓取、解码并返回下一个视频帧。 cv::VideoCapture::read() 是 VideoCapture 类的一个成员函数&#xff0c;用于从视频源中读取一帧图像. 该方法…...

深度学习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&#xff08;动态链接库&#xff09;中导入函数的一个特性。这个特性允许你在 .NET 应用程序中调用由其他语言编写的函数&#xff0c;如 C 或 C。使用 DllImport 可以让你重用现有的非托管代码&#xff0c;而不需要重新实现这些功能。 下面…...

基于 Redis 实现滑动窗口的限流

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

Camera Raw:打开图像

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

RK3588主板PCB设计学习(六)

可以在其它层对过孔进行削盘处理&#xff0c; 可以看到&#xff0c;这里有些过孔用不上&#xff0c;在这一层进行了削盘处理&#xff1a; 对于这种电源层进行铺铜操作的时候&#xff0c;如果不进行削盘处理的话这些焊盘可能导致这个电源层面不完整&#xff0c;存在割裂的风险&a…...

论文阅读(十一):CBAM: Convolutional Block Attention Module

文章目录 IntroductionConvolutional Block Attention ModuleExperimentsConclusion 论文题目&#xff1a;CBAM: Convolutional Block Attention Module&#xff08;CBAM&#xff1a;卷积注意力机制&#xff09;   论文链接&#xff1a;点击跳转   代码链接&#xff1a;Git…...

【Kubernetes】常见面试题汇总(四十八)

目录 108.考虑一家拥有非常分散的系统的跨国公司&#xff0c;希望解决整体代码库问题。您认为公司如何解决他们的问题&#xff1f; 109.我们所有人都知道从单服务到微服务的转变从开发方面解决了问题&#xff0c;但在部署方面却增加了问题。公司如何解决部署方面的问题&#x…...

Qt Creator安卓环境配置【筑基篇】

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

利用SpringBoot构建高效社区医院平台

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

【C++ 前缀和 数论】1590. 使数组和能被 P 整除|2038

本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 质数、最大公约数、菲蜀定理 LeetCode 1590. 使数组和能被 P 整除 给你一个正整数数组 nums&#xff0c;请你移除 最短 子数组&#xff08;可以为 空&#xff09;&am…...

外部引入的 JavaScript 放置位置

部引入的 JavaScript 通常有两种常见的放置位置&#xff0c;每个位置都有其优缺点&#xff0c;具体取决于页面的需求和性能优化目标&#xff1a; 1. 放在页面的 <head> 标签中 这种方式在 HTML 文档的 <head> 部分引入 JavaScript 文件。 <head><scrip…...

【tbNick专享】虚拟机域控、成员服务器、降级等管理

在 VMware 中完成四台域控服务器、一台成员服务器的创建、降级域控为成员服务器&#xff0c;并创建子域的操作。 1. 创建四台域控和一台成员服务器 1.1 在 VMware 中创建虚拟机 启动 VMware Workstation&#xff1a; 打开 VMware Workstation&#xff0c;点击 “创建新的虚拟…...

Raspberry Pi3B+之Rpanion(gst)和ffmpeg验证

Raspberry Pi3B之Rpanion-gst和ffmpeg验证 1. 源由2. 分析3. 环境搭建步骤1&#xff1a;安装镜像步骤2&#xff1a;系统更新步骤3&#xff1a;安装numpy组件步骤4&#xff1a;安装python3-picamera2组件步骤4&#xff1a;安装cv2组件步骤5&#xff1a;安装ffmpeg组件步骤6&…...

数据结构编程实践20讲(Python版)—04队列

本文目录 04 队列 QueueS1 说明S2 示例普通队列循环队列双端队列优先队列S3 问题:基于普通队列实现的打印机任务管理Python3程序S4 问题:使用循环队列管理玩家移动轨迹Python3程序S5 问题:使用双端队列来管理文档操作历史Python3程序S6 问题:使用优先队列管理车辆调度Pytho…...

Ubuntu开机进入紧急模式处理

文章目录 Ubuntu开机进入紧急模式处理一、问题描述二、解决办法参考 Ubuntu开机进入紧急模式处理 一、问题描述 Ubuntu开机不能够正常启动&#xff0c;自动进入紧急模式&#xff08;You are in emergency mode&#xff09;。具体如下所示&#xff1a; 二、解决办法 按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种国内外媒体套餐发稿突出重围?

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

Spring DI 笔记

目录 1.什么是DI? 2.依赖注入的三种⽅式 2.1属性注⼊ 2.2构造⽅法注⼊ 2.3Setter 注⼊ 2.4三种注⼊优缺点分析 3.Autowired存在问题 1.什么是DI? DI: 依赖注⼊ 依赖注⼊是⼀个过程&#xff0c;是指IoC容器在创建Bean时, 去提供运⾏时所依赖的资源&#xff0c;⽽资源指的…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

API网关Kong的鉴权与限流:高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

智能职业发展系统:AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...