前端 如何用 div 标签实现 步骤审批
在前端实现一个步骤审批流程,通常是通过 div
标签和 CSS 来构建一个可视化的流程图,结合 JavaScript 控制审批的状态变化。你可以使用 div
标签创建每一个步骤节点,通过不同的样式(如颜色、边框等)表示审批的不同状态,并通过事件控制流程的进度。
1. 基本思路
- 每一个步骤使用一个
div
标签来表示。 - 步骤之间使用箭头或连接线表示流程的顺序。
- 每个步骤有不同的状态,比如
待审批
、已通过
、已拒绝
,用颜色来区分。 - 使用 JavaScript 或框架(如 Vue.js、React)来动态控制步骤的状态。
2. 示例代码
HTML + CSS + JavaScript 实现简单的步骤审批流程
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>步骤审批流程</title><style>.approval-flow {display: flex;justify-content: space-around;margin-top: 50px;}.step {position: relative;width: 100px;height: 100px;border-radius: 50%;text-align: center;line-height: 100px;font-size: 14px;color: white;cursor: pointer;transition: background-color 0.3s;}.step p {margin: 0;}/* 步骤状态 */.pending {background-color: gray;}.approved {background-color: green;}.rejected {background-color: red;}/* 箭头连接线 */.arrow {position: absolute;top: 50%;width: 50px;height: 3px;background-color: gray;left: 100%;margin-left: 10px;transform: translateY(-50%);}.arrow-right {transform: rotate(90deg);}</style>
</head>
<body><div class="approval-flow"><div class="step pending" id="step1" onclick="changeStatus(1)"><p>步骤1</p></div><div class="arrow"></div><div class="step pending" id="step2" onclick="changeStatus(2)"><p>步骤2</p></div><div class="arrow"></div><div class="step pending" id="step3" onclick="changeStatus(3)"><p>步骤3</p></div></div><script>let currentStep = 1;// 改变步骤的状态function changeStatus(step) {if (step < currentStep) return; // 如果点击的步骤是已完成的,不能点击const stepElement = document.getElementById('step' + step);if (step === currentStep) {stepElement.classList.remove('pending');stepElement.classList.add('approved'); // 当前步骤通过currentStep++; // 前进到下一个步骤}}</script></body>
</html>
3. 解释代码
HTML 结构
- 我们创建了一个包含三个步骤的流程。每个步骤都是一个
div
元素,标记为step
。 - 每个步骤之间有一个
div
连接线,代表步骤之间的流程顺序。 - 点击每个步骤时,触发
changeStatus
函数,动态改变步骤的状态。
CSS 样式
.approval-flow
:使用flex
布局将步骤水平排列。.step
:每个步骤是一个圆形,通过border-radius: 50%
和固定的width
和height
实现。pending
:默认状态,灰色表示该步骤还未审批。approved
:步骤通过时,绿色表示已通过。rejected
:如果需要拒绝状态,可以用红色来表示。
.arrow
:用来表示步骤之间的连接线,使用了position: absolute
来定位并通过transform: rotate(90deg)
实现箭头的方向。
JavaScript 逻辑
changeStatus(step)
函数用于改变步骤的状态。点击步骤后,该步骤的颜色会变成绿色(表示通过),并且流程会前进到下一个步骤。currentStep
变量用来跟踪当前审批到的步骤。
4. 改进建议
- 动态数据:如果你想让这个流程变得更加灵活,可以通过 JavaScript 或后端提供数据动态生成步骤。
- 更多状态:可以加入更多的步骤状态,比如
已拒绝
、处理中
等。 - 动画效果:可以使用 CSS 动画增强交互体验,比如步骤完成时添加渐变、动画过渡等。
- 后端集成:如果步骤审批是基于实际数据(比如审批结果来自服务器),你可以通过 Ajax 或 Fetch API 从后端获取数据并更新流程状态。
这个简单的流程图可以为你提供一个良好的起点,你可以根据需要继续扩展和优化。
相关文章:
前端 如何用 div 标签实现 步骤审批
在前端实现一个步骤审批流程,通常是通过 div 标签和 CSS 来构建一个可视化的流程图,结合 JavaScript 控制审批的状态变化。你可以使用 div 标签创建每一个步骤节点,通过不同的样式(如颜色、边框等)表示审批的不同状态&…...
QT工程,它该怎么学?
在现代软件开发中,QT因其强大的跨平台能力和友好的用户界面设计工具,成为开发者学习和应用的热门选择。特别是在Linux系统下,如何安装、配置QT开发环境,以及创建和管理QT工程是入门QT开发的关键环节。本文将从安装QT开发环境开始&…...
第426场周赛:仅含置位位的最小整数、识别数组中的最大异常值、连接两棵树后最大目标节点数目 Ⅰ、连接两棵树后最大目标节点数目 Ⅱ
Q1、仅含置位位的最小整数 1、题目描述 给你一个正整数 n。 返回 大于等于 n 且二进制表示仅包含 置位 位的 最小 整数 x 。 置位 位指的是二进制表示中值为 1 的位。 2、解题思路 我们需要找到一个整数 x,使得: x ≥ nx 的二进制表示中仅包含置位…...
23种设计模式之外观模式
目录 1. 简介2. 代码2.1 SelectFoodService (选择食品)2.2 PayService (支付服务)2.3 TakeService (制作服务)2.4 OrderService (下单服务)2.5 Food (食品)2.6 TackingSystem (外观类)2.7 Test (测试类) 3. 优缺点3. 总结 1. 简介…...
【智商检测——DP】
题目 代码 #include <bits/stdc.h> using namespace std; const int N 1e510, M 110; int f[N][M]; int main() {int n, k;cin >> n >> k;for(int i 1; i < n; i){int x;cin >> x;f[i][0] __gcd(f[i-1][0], x);for(int j 1; j < min(i, k)…...
LeetCode-430. 扁平化多级双向链表-题解
题目链接 430. 扁平化多级双向链表 - 力扣(LeetCode) 题目介绍 你将得到一个双链表,节点包含一个“下一个”指针、一个“前一个”指针和一个额外的“子指针”。这个子指针可能指向一个单独的双向链表,并且这些链表也包含类似的特殊…...
【CSS】一篇掌握CSS
不是因为有了希望才去坚持,而是坚持了才有了希望 目录 一.导入方式 1.行内样式 2.内部样式 3.外部样式(常用) 二.选择器 1.基本选择器(常用) 1.1标签选择器 1.2类选择器 1.3id选择器 2.层次选择器 2.1后代选择器 2.2子选择器 2.3相邻兄弟选择器 2.4通用兄弟选择器…...
华为仓颉编程环境搭建
1、仓颉介绍 摘自华为官方:仓颉编程语言作为一款面向全场景应用开发的现代编程语言,通过现代语言特性的集成、全方位的编译优化和运行时实现、以及开箱即用的 IDE 工具链支持,为开发者打造友好开发体验和卓越程序性能。 其具体特性表现为&am…...
手机实时提取SIM卡打电话的信令声音-蓝牙电话如何适配eSIM卡的手机
手机实时提取SIM卡打电话的信令声音 --蓝牙电话如何适配eSIM卡的手机 一、前言 蓝牙电话的海外战略中,由于海外智能手机市场中政策的差异性,对内置eSIM卡的手机进行支持是非常合理的需求。Android系列手机中,无论是更换通信运营商…...
三种方式(oss、本地、minio)图片的上传下载
一、OSS 1、前期准备 1.1 注册阿里云账号,开启对象存储oss功能,创建一个bucket(百度教程多的是,跟着创建一个就行,创建时注意存储类型是标准存储,读写权限是公共读) 有的在创建桶时读写属性是…...
使用pyQT完成简单登录界面
import sysfrom PyQt6.QtGui import QMovie,QPixmap from PyQt6.QtWidgets import QApplication, QWidget, QLabel, QPushButton,QLineEdit#封装我的窗口类 class MyWidget(QWidget):#构造函数def __init__(self):#初始化父类super().__init__()# 设置窗口大小self.resize(330,…...
Postgres数据库自动化分区
一.创建自动化分区配置表并插入数据 -- Table: managerdb.par_info-- DROP TABLE IF EXISTS managerdb.par_info;CREATE TABLE IF NOT EXISTS managerdb.par_info (table_schema character varying(255) COLLATE pg_catalog."default" NOT NULL,table_name characte…...
【技术介绍】C++编程语言中的瑰宝
C,这门源于C语言并在其基础上进行大幅增强的编程语言,自诞生以来便以其独特的魅力和强大的功能吸引了无数编程者的目光。它不仅是计算机科学领域的一颗璀璨明珠,更是现代软件开发中不可或缺的重要工具。 解析【前言】 C的命名,寓…...
nginx反向代理
目录 环境准备 启动HTTP服务 配置Nginx 访问 部署 1.配置nginx 2.自动化脚本 3.执行脚本 4.使用ansible 什么是反向代理呢,参考nginx反向代理,业务部署过长中,常遇到的场景如下,通过访问域名/ip地址,后面接入网…...
分层图最短路
常见情形: 对于边有k次操作的题。。 整体思想: 分层图最短路可以视作是dijkstra的一个扩展,通常用于处理N小于10000,或者是k不大的情形。整体有点类似于拆点。将一个点拆成k个点处理。层与层之间互不影响。 好了我就说这么多&…...
FRU文件
FRU(Field Replaceable Unit)源文件的格式通常遵循IPMI FRU Information Storage Definition标准。在实际应用中,FRU源文件可以是JSON格式的,这种格式允许用户指定所有的FRU信息字段。以下是FRU源文件的JSON格式的一些关键点&…...
兔子繁衍问题
7-2 兔子繁衍问题 分数 15 全屏浏览 切换布局 作者 徐镜春 单位 浙江大学 一对兔子,从出生后第3个月起每个月都生一对兔子。小兔子长到第3个月后每个月又生一对兔子。假如兔子都不死,请问第1个月出生的一对兔子,至少需要繁衍到第几个月时兔…...
飞凌嵌入式受邀亮相OpenHarmony人才生态大会2024
2024年11月27日,OpenHarmony人才生态大会2024在武汉洲际酒店举行。在这场汇聚了行业精英、技术大咖及生态伙伴的年度盛会上,飞凌嵌入式作为OpenHarmony社区的重要成员受邀出席,并展示了其在OpenHarmony 4.1系统适配方面的最新成果。 在大会的…...
Resrful控制器
Linux Debian 包管理器 apt DebianUbuntuKali红帽子 包管理器dnf或者yum RHELFedroaCentos Stream RHEL上游版本,就是什么新的内容、特性会在这个上面进行测试 运行 运行页面--dotnet blog.dll配置管理 server{listen 80;server_name m.域名;location / {proxy_p…...
Python练习(2)
重复元素判定续。利用集合的无重复性来编写一个程序如果有一个元素出现了不止一次则返回true但不要改变原来列表的值: 一: def has_duplicates(lst): # 使用集合来存储已经见过的元素 seen set() for item in lst: if item in seen: # 如果元素已经在…...
Qt清空文件夹下的内容
Qt清空文件夹下的内容 你可以使用 QDir 类来清空文件夹下的所有内容。以下是一个示例,展示了如何删除指定文件夹中的所有文件和子文件夹: #include <QCoreApplication> #include <QDir> #include <QFileInfoList> #include <QDeb…...
如何手动设置ubuntu服务器的ip、子网掩码、网关、DNS
在 Ubuntu 服务器上手动设置 IP 地址、子网掩码、网关和 DNS,通常有两种方式:使用传统的 ifconfig 命令和配置文件,或者使用现代的 netplan 配置方式(对于 Ubuntu 17.10 及以后版本,netplan 是默认的网络配置工具&…...
单片机状态机实现多个按键同时检测单击、多击、长按等操作
1.背景 在之前有个项目需要一个或多个按键检测:单击、双击、长按等操作 于是写了一份基于状态机的按键检测,分享一下思路 2.实现效果 单击翻转绿灯电平 双击翻转红灯电平 长按反转红绿灯电平 实现状态机检测按键单击,双击,长…...
graph rag都能做哪些事情
从提供的项目目录结构看,系统具备高复杂度和模块化的设计,可能用于大规模数据处理、知识图谱构建、自然语言处理等方面。以下是一些推理出的核心能力和应用场景: 1. 核心模块能力: API 层 (api) 主要用于对外接口的定义和服务调…...
Linux 用户和用户组管理
Linux 用户和用户组管理 Linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统。 用户的账号一方面可以帮助系统管理员对使用系统的用户进行跟踪&…...
Python酷库之旅-第三方库Pandas(251)
目录 一、用法精讲 1186、pandas.tseries.offsets.BusinessMonthEnd.is_year_start方法 1186-1、语法 1186-2、参数 1186-3、功能 1186-4、返回值 1186-5、说明 1186-6、用法 1186-6-1、数据准备 1186-6-2、代码示例 1186-6-3、结果输出 1187、pandas.tseries.offs…...
利用Ubuntu批量下载modis图像(New)
由于最近modis原来批量下载的代码不再直接给出,因此,再次梳理如何利用Ubuntu下载modis数据。 之前的下载代码为十分长,现在只给出一部分,需要自己再补充另一部分。之前的为: 感谢郭师兄的指导(https://blo…...
Redis分布式锁
一、全局ID生成器 1.1 概念 全局ID生成器,是一种在分布式系统下用来生成全局唯一ID的工具。具有以下特点: (1)唯一性;(2)高可用;(3&…...
【Maven】依赖管理
4. Maven的依赖管理 在 Java 开发中,项目的依赖管理是一项重要任务。通过合理管理项目的依赖关系,我们可以有效的管理第三方库,模块的引用及版本控制。而 Maven 作为一个强大的构建工具和依赖管理工具,为我们提供了便捷的方式来管…...
leetcode——移除数组
26.删除有序数组中的重复项 给你一个 非严格递增排列 的数组 nums ,请你 原地 删除重复出现的元素,使每个元素 只出现一次 ,返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素…...
vue项目部署到github pages后页面显示不出来??
问题: 当我们在命令行执行 npm run build 后,项目的目录下会生成一个 dist 文件夹,它里面又包含一个 static 文件夹和一个 index.html 文件,这是 webpack 最终打包好的文件 项目上传到仓库后发现页面为空,找不到文件路…...
为什么爱用低秩矩阵
目录 为什么爱用低秩矩阵 一、定义与性质 二、区别与例子 为什么爱用低秩矩阵 我们更多地提及低秩分解而非满秩分解,主要是因为低秩分解在数据压缩、噪声去除、模型简化和特征提取等方面具有显著的优势。而满秩分解虽然能够保持数据的完整性,但在实际应用中的场景较为有限…...
如何在MySQL中计算两个日期的间隔天数
目录 1. DATEDIFF函数2. TIMESTAMPDIFF函数3. PERIOD_DIFF函数4. 函数对比 在MySQL 5.7中,计算两个日期之间的间隔天数是一项常见的任务。 1. DATEDIFF函数 DATEDIFF函数可以直接计算两个日期之间的天数差异。 -- 计算2024年1月1日和2024年1月10日之间的天数差异 …...
SQL面试题——抖音SQL面试题 共同问题—共同使用ip用户检测问题
共同使用ip用户检测问题 现有用户登录日志表,记录了每个用户登录的IP地址,请查询共同使用过3个及以上IP的用户对; +---+--------------+-------------------+ | id| ip| etime| +---+--------------+-------------------+ | 2|223.104.41.101|20…...
python学习笔记2
下载安装PyCharm 打开pycharm官网: https://www.jetbrains.com.cn/en-us/pycharm/download/?sectionwindows 找到社区版(免费) 下载之后打开,不停下一步就行 打开pycharm软件后,新建py文件 基本输出:…...
IS-IS的原理
IS-IS的基本概念: 概述: IS-IS,中间系统到中间系统,是ISO国际标准化组织为它的无连接网络协议设计的一种动态路由协议 IS-IS支持CLNP网络和IP网络,采用数据链路层封装,区别于ospf只支持IP网络࿰…...
现代应用程序中基于 Cell 架构的安全防护之道
在飞速发展的软件开发领域,基于 Cell 的架构日益流行起来。其概念源自船舶舱壁的设计准则,即单独的水密舱室能允许故障孤立存在。通过将这个概念应用于软件,我们创建了一个架构,将应用程序划分为离散的、可管理的组件,…...
Rust : 生成日历管理markdown文件的小工具
需求: 拟生成以下markdown管理小工具,这也是我日常工作日程表。 可以输入任意时间段,运行后就可以生成以上的markdown文件。 一、toml [package] name "rust-workfile" version "0.1.0" edition "2021"[d…...
Burp Suite 全面解析:开启你的 Web 安全测试之旅
声明! 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团队无关&a…...
RocketMQ: 消息积压问题的解决
概述 1 ) 什么是消息积压 在分布式消息系统中,消息积压是指消息生产速度超过消息消费速度,导致未处理的消息在消息队列中累积的现象这种现象可能会导致系统性能下降、资源占用增加,甚至影响系统的正常运行 2 )消息积…...
Qt的定时器应用案例 || Qt的图片添加显示
目录 1.ui界面 2.头文件 3.cpp源文件 4.main文件 5.关于ui_mytimerevent.h的代码编译错误 6.图片的添加展示方式 7.结果展示 8.参考文章 1.ui界面 2.头文件 #ifndef MYTIMEREVENT_H #define MYTIMEREVENT_H#include <QMainWindow> #include <QTime> //#in…...
24.12.02 Element
import { createApp } from vue // 引入elementPlus js库 css库 import ElementPlus from element-plus import element-plus/dist/index.css //中文语言包 import zhCn from element-plus/es/locale/lang/zh-cn //图标库 import * as ElementPlusIconsVue from element-plus/i…...
web安全攻防入门教程
Web安全攻防入门教程 Web安全攻防是指在Web应用程序的开发、部署和运行过程中,保护Web应用免受攻击和恶意行为的技术与策略。这个领域不仅涉及防御措施的实现,还包括通过渗透测试、漏洞挖掘和模拟攻击来识别潜在的安全问题。 本教程将带你入门Web安全攻…...
Android——android相对布局(RelativeLayout)及各属性
参考:Android——android相对布局(RelativeLayout)及属性 - 艺言弈行 - 博客园 (cnblogs.com)...
初窥 HTTP 缓存
引言 对于前端来说, 你肯定听说过 HTTP 缓存。 当然不管你知不知道它, 对于提高网站性能和用户体验, 它都扮演着重要的角色! 它通过在客户端和服务器之间存储和重用先前获取的资源副本, 来减少网络流量和降低资源加载时间, 从而提升用户体验! 以下是 HTTP 缓存的重要性: 减少…...
【LeetCode】3. 哈希表: 字母异位词分组;有效的数独
题目 字母异位词分组 给你一个字符串数组,请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs [“eat”, “tea”, “tan”, “ate”, “nat”, “bat”] 输出: [[“…...
设计模式之抽象工厂 C# 范例
在设计模式中,抽象工厂模式(Abstract Factory Pattern) 是一种创建型模式,它提供一个接口,用于创建一组相关或相互依赖的对象,而无需指定具体类。这种模式的关键在于通过抽象工厂来封装产品的创建ÿ…...
基于Python的猎聘网招聘数据采集与可视化分析
1.1项目简介 在现代社会,招聘市场的竞争日趋激烈,企业和求职者都希望能够更有效地找到合适的机会与人才。猎聘网作为国内领先的人力资源服务平台,汇聚了大量的招聘信息和求职者数据,为研究招聘市场趋势提供了丰富的素材。基于Pyt…...
oracle数据库的启动与关闭
一.oracle数据库的启动过程 启动实例(Start the Instance) 启动实例:一个Oracle数据库实例由内存结构和后台进程组成,启动实例时会加载这些内存结构和启动进程。实例是数据库的一个运行时环境,它包含了数据库的控制文…...
openGauss开源数据库实战十六
文章目录 任务十六 openGauss逻辑结构:触发器管理任务目标实施步骤一、测试openGauss的触发器1.创建测试表2.创建触发器对应的函数3.创建触发器4.测试触发器 二、触发器的类型1.行级触发器2.语句级触发器3.AFTER触发器和 BEFORE触发器 任务十六 openGauss逻辑结构:触发器管理 …...