JavaScript实现审核流程状态的动态显示进度条的示例代码分享（图）

来源：懂视网责编：小OO 时间：2020-11-27 20:23:49

JavaScript实现审核流程状态的动态显示进度条的示例代码分享（图）

对于有很多流程的东西，我们希望能够根据不同的阶段，用流程条对应地进行显示，如下所示。以上功能对应的html代码如下：，等待厂商审阅<；/p>；<；/p>；<；/li>；<；li name="；tab_step2_pub"；>；<；p class="；info"；id="；tab_step2"；>；<；h4>；<；p class="；heading"；>；<；/p>；待确认<；/h4>；<；p class="；text"；>；漏洞已开始审阅。

推荐度：

点击下载本文 文档为doc格式

导读对于有很多流程的东西，我们希望能够根据不同的阶段，用流程条对应地进行显示，如下所示。以上功能对应的html代码如下：，等待厂商审阅<；/p>；<；/p>；<；/li>；<；li name="；tab_step2_pub"；>；<；p class="；info"；id="；tab_step2"；>；<；h4>；<；p class="；heading"；>；<；/p>；待确认<；/h4>；<；p class="；text"；>；漏洞已开始审阅。

对于有很多流程的东西，我们希望能够根据不同的阶段，用流程条对应地进行显示，非常直观，给用户带来极好的用户体验，下面小编给大家分享JavaScript实现审核流程状态的动态显示进度条功能，需要的的朋友参考下

对于有很多流程的东西，我们希望能够根据不同的阶段，用流程条对应地进行显示，如下所示：

以上功能对应的html代码如下：

<p class="col-md-12 col-lg-3"> 
 <p class="panel panel-default"> 
 <p class="tit06"> 
 <h3>漏洞处理状态</h3> 
 </p> 
 <p class="status"> 
 <ul> 
 <li name="tab_step1_pub" class="top active"> 
 <p class="info" id="tab_step1"> 
 <h4> 
 <p class="heading"></p> 
 待审阅</h4> 
 <p class="text" >漏洞已提交，等待厂商审阅</p> 
 </p> 
 </li> 
 <li name="tab_step2_pub" > 
 <p class="info" id="tab_step2"> 
 <h4> 
 <p class="heading"></p> 
 待确认</h4> 
 <p class="text" >漏洞已开始审阅，等待厂商确认</p> 
 </p> 
 </li> 
 <li name="tab_step3_pub"> 
 <p class="info" id="tab_step3"> 
 <h4> 
 <p class="heading"></p> 
 待修复</h4> 
 <p class="text" >漏洞已被确认，等待厂商修复</p> 
 </p> 
 </li> 
 <li name="tab_step4_pub"> 
 <p class="info" id="tab_step4"> 
 <h4> 
 <p class="heading"></p> 
 已关闭</h4> 
 <p class="text" >漏洞修复完毕，厂商关闭漏洞</p> 
 </p> 
 </li> 
 <li name="tab_step5_pub" > 
 <p class="info" id="tab_step5"> 
 <h4> <p class="heading"></p> 
 已公开</h4> 
 <p class="text" >厂商同意公开此漏洞</p> 
 </p> 
 </li> 
 </ul> 
 </p> 
 </p> 
 </p>

这里采用的方法是根据处理的状态，这里是$status，对应的在相应的<li>的标签中增加样式类 class="active"，而样式类active中实现的是在对应位置替换背景图片，即将原来的灰色流程线条替换成绿色的流程线条。即需要设置对应的替换后和替换前的css，这里对应的css如下（\assets\default\threatrules\style.css中的一部分）：

设置好对应的css后，下一步就是编写js，根据$status的值，在对应的<li>中添加class即可，实现此功能的js代码如下：

这样设置之后，更改$status的状态，为“待修复”后，网页流程实现如下：