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

前端 如何用 div 标签实现 步骤审批

news 2026/2/1 2:02:29

在前端实现一个步骤审批流程，通常是通过 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 标签实现 步骤审批

在前端实现一个步骤审批流程&#xff0c;通常是通过 div 标签和 CSS 来构建一个可视化的流程图&#xff0c;结合 JavaScript 控制审批的状态变化。你可以使用 div 标签创建每一个步骤节点&#xff0c;通过不同的样式&#xff08;如颜色、边框等&#xff09;表示审批的不同状态&…...

编程日记 2024/12/3 13:22:21

【大数据技术基础 | 实验十四】Kafka实验：订阅推送示例

文章目录 一、实验目的二、实验要求三、实验原理&#xff08;一&#xff09;Kafka简介&#xff08;二&#xff09;Kafka使用场景 四、实验环境五、实验内容和步骤&#xff08;一&#xff09;配置各服务器之间的免密登录&#xff08;二&#xff09;安装ZooKeeper集群&#xff08…...

编程日记 2024/12/3 13:20:19

SpringAi整合大模型(进阶版)

进阶版是在基础的对话版之上进行新增功能。 如果还没弄出基础版的&#xff0c;请参考 https://blog.csdn.net/weixin_54925172/article/details/144143523?sharetypeblogdetail&sharerId144143523&sharereferPC&sharesourceweixin_54925172&spm1011.2480.30…...

编程日记 2024/12/3 13:19:18

为什么爱用低秩矩阵

目录 为什么爱用低秩矩阵 一、定义与性质 二、区别与例子 为什么爱用低秩矩阵 我们更多地提及低秩分解而非满秩分解，主要是因为低秩分解在数据压缩、噪声去除、模型简化和特征提取等方面具有显著的优势。而满秩分解虽然能够保持数据的完整性，但在实际应用中的场景较为有限…...

编程日记 2024/12/3 13:15:13

React 自定义钩子：useOnlineStatus

我们今天的重点是 “useOnlineStatus” 钩子&#xff0c;这是 React 自定义钩子集合中众多精心制作的钩子之一。 Github 的&#xff1a;https://github.com/sergeyleschev/react-custom-hooks import { useState } from "react" import useEventListener from &quo…...

编程日记 2024/12/3 13:14:12

uniapp 小程序 监听全局路由跳转 获取路由参数

uniapp 小程序 监听全局路由跳转 获取路由参数 app.vue中 api文档 onLaunch: function(options) {let that this;let event [navigateTo, redirectTo, switchTab, navigateBack];event.forEach(item > {uni.addInterceptor(item, { //监听跳转//监听跳转success(e) {tha…...

编程日记 2024/12/3 13:11:08

12.02 深度学习-卷积

# 卷积 是用于图像处理 能够保存图像的一些特征 卷积层 如果用全连接神经网络处理图像 计算价格太大了 图像也被转为线性的对象导致失去了图像的空间特征 只有在卷积神经网络cnn的最后一层使用全连接神经网络 # 图像处理的三大任务 # 目标检测 对图像中的目标进行框出来 # 图…...

编程日记 2024/12/3 13:08:05

MySQL 主从同步一致性详解

MySQL主从同步是一种数据复制技术&#xff0c;它允许数据从一个数据库服务器&#xff08;主服务器&#xff09;自动同步到一个或多个数据库服务器&#xff08;从服务器&#xff09;。这种技术主要用于实现读写分离、提升数据库性能、容灾恢复以及数据冗余备份等目的。下面将详细…...

编程日记 2024/12/3 13:04:01

Spring源码导入idea时gradle构建慢问题

当我们将spring源码导入到idea进行构建的时候&#xff0c;spring采用的是gradle进行构建&#xff0c;默认下注在依赖是从https://repo.maven.apache.org会特别慢&#xff0c;需要改为国内的镜像地址会加快速度。 将项目中build.gradle配置进行调整&#xff1a; repositories …...

编程日记 2024/12/3 13:00:59

Dockerfile 安装echarts插件给java提供服务

java调用echarts插件&#xff0c;生成图片保存到磁盘然后插入到pptx中报表。 Dockerfile文件内容&#xff1a; #基础镜像&#xff0c;如果本地仓库没有&#xff0c;会从远程仓库拉取 openjdk:8 FROM docker.io/centos:centos7 #暴露端口 EXPOSE 9311 # 避免centos 日志输出 …...

编程日记 2024/12/3 12:59:57

Springboot小知识(1)：启动类与配置

一、启动类&#xff08;引导类&#xff09; 在通常情况下&#xff0c;你创建的Spring应用项目都会为你自动生成一个启动类&#xff0c;它是这个应用的起点。 在Spring Boot中&#xff0c;引导类&#xff08;也称为启动类&#xff0c;通常是main方法所在的类&#xff09;是整个…...

编程日记 2024/12/3 12:56:54

[CISCN 2019华东南]Web11

[CISCN 2019华东南]Web11 给了两个链接但是都无法访问 这里我们直接抓包试一下 我们插入X-Forwarded-For:127.0.0.1 发现可以修改了右上角的IP地址&#xff0c;从而可以进行注入 {$smarty.version} 查看版本号 if标签执行PHP命令 {if phpinfo()}{/if} 查看协议 {if system(…...

编程日记 2024/12/3 12:54:52

Cypress内存溢出奔溃问题汇总

内存溢出报错信息 <--- Last few GCs ---> [196:0xe58001bc000] 683925 ms: Scavenge 1870.7 (1969.9) -> 1865.6 (1969.9) MB, 6.07 / 0.00 ms (average mu 0.359, current mu 0.444) task; [196:0xe58001bc000] 683999 ms: Scavenge 1872.4 (1969.9) -> 1867.1…...

编程日记 2024/12/3 12:50:47

树莓派4B--OpenCV安装踩坑

报错&#xff1a; Source directory: /tmp/pip-install-pv7l9r25/opencv-python_08fdf5a130a5429f89b0e0eaab39a329 Working directory: /tmp/pip-install-pv7l9r25/opencv-python_08fdf5a130a5429f89b0e0eaab39a329/_skbuild/linux-armv7l-3.7/cmake-build Please check the i…...

编程日记 2024/12/3 12:48:45

电子电气架构 --- 面向服务的汽车诊断架构

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 所有人的看法和评价都是暂时的，只有自己的经历是伴随一生的，几乎所有的担忧和畏惧，都是来源于自己的想象，只有你真的去做了，才会发现有多快乐。…...

编程日记 2024/12/3 12:47:44

Pytest --capture 参数详解：如何控制测试执行过程中的输出行为

--capture 选项用于控制测试用例执行过程中标准输出&#xff08;stdout&#xff09;和标准错误输出&#xff08;stderr&#xff09;的捕获行为。 --capture 的选项值&#xff1a; fd&#xff08;默认&#xff09; 捕获文件描述符级别的输出&#xff08;stdout 和 stderr&#x…...

编程日记 2024/12/3 12:44:35

IS-IS的原理

IS-IS的基本概念&#xff1a; 概述&#xff1a; IS-IS&#xff0c;中间系统到中间系统&#xff0c;是ISO国际标准化组织为它的无连接网络协议设计的一种动态路由协议 IS-IS支持CLNP网络和IP网络&#xff0c;采用数据链路层封装&#xff0c;区别于ospf只支持IP网络&#xff0…...

编程日记 2024/12/3 12:42:33

C++(4个类型转换)

1. C语言中的类型转换 1. 隐式 类型转换&#xff1a; 具有相近的类型才能进行互相转换&#xff0c;如&#xff1a;int,char,double都表示数值。 2. 强制类型转换&#xff1a;能隐式类型转换就能强制类型转换&#xff0c;隐式类型之间的转换类型强相关&#xff0c;强制类型转换…...

编程日记 2024/12/3 12:41:32

Ubuntu20.04安装NVIDIA显卡驱动

Ubuntu20.04安装NVIDIA显卡驱动 参考资料&#xff1a;https://blog.csdn.net/weixin_39244242/article/details/136282614?fromshareblogdetail&sharetypeblogdetail&sharerId136282614&sharereferPC&sharesourceqq_37397652&sharefromfrom_link 成功配置…...

编程日记 2024/12/3 12:38:29

速盾：介绍一下高防cdn的缓存响应事什么功能？

高防CDN&#xff08;Content Delivery Network&#xff09;是一种基于分布式缓存技术的网络加速服务&#xff0c;能够提供强大的缓存响应功能。它的缓存响应功能主要包括缓存加速和智能缓存两个方面。 首先&#xff0c;高防CDN的缓存加速功能是指通过在全球范围内部署大量的缓…...

编程日记 2024/12/3 12:37:26

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2026/2/1 1:50:03

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2026/1/28 7:12:45

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

编程新知 2026/1/26 8:42:13

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

编程新知 2025/11/21 0:25:40

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

编程新知 2025/11/4 17:30:04

《信号与系统》第 6 章 信号与系统的时域和频域特性

目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...

编程新知 2026/1/31 13:16:47

Java后端检查空条件查询

通过抛出运行异常&#xff1a;throw new RuntimeException("请输入查询条件&#xff01;");BranchWarehouseServiceImpl.java // 查询试剂交易&#xff08;入库/出库&#xff09;记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...

编程新知 2026/1/26 16:43:43

五、jmeter脚本参数化

目录 1、脚本参数化 1.1 用户定义的变量 1.1.1 添加及引用方式 1.1.2 测试得出用户定义变量的特点 1.2 用户参数 1.2.1 概念 1.2.2 位置不同效果不同 1.2.3、用户参数的勾选框 - 每次迭代更新一次 总结用户定义的变量、用户参数 1.3 csv数据文件参数化 1、脚本参数化 …...

编程新知 2026/1/26 19:39:14

Vue 实例的数据对象详解

Vue 实例的数据对象详解 在 Vue 中，数据对象是响应式系统的核心，也是组件状态的载体。理解数据对象的原理和使用方式是成为 Vue 专家的关键一步。我将从多个维度深入剖析 Vue 实例的数据对象。 一、数据对象的定义方式 1. Options API 中的定义 在 Options API 中，使用 …...

编程新知 2025/12/7 4:13:41