首页 > 编程知识 正文

前端流程实现什么功能,前端如何实现设计

时间:2023-05-06 08:17:36 阅读:262059 作者:3379

利用前端实现流程图

概括:根据元素拼凑流程图,用于一些操作记录。有需要的小伙伴可以一起探讨,我也是写写项目遇到的东西。。嘿嘿嘿
流程图如下

//这里没有贴完 相信看了这个就知道如何拼出上面的图片了var div = document.getElementById("flowId");//开始圆图var div2 = document.createElement("div");div2.setAttribute('class', 'index-contentla-begin index-content-bg');$(div2).text('开始排故');//连接线var div21 = document.createElement("div");div21.setAttribute('class', 'index-contentla-arrow')var div211 = document.createElement("div");div211.setAttribute('class', 'index-contentla-arrowa');var div212 = document.createElement("div");div212.setAttribute('class', 'index-contentla-arrowb');div21.appendChild(div211);div21.appendChild(div212);div.appendChild(div2);div.appendChild(div21);......//这里为上图一步一步左边的成果图 ***注意用的时候需要多一个div包裹***<div class="index-contentla-begin index-content-bg">开始排故</div><div class="index-contentla-arrow"><div class="index-contentla-arrowa"></div><div class="index-contentla-arrowb"></div></div><div class="index-contentla-cfx index-content-bg">故障原因001已解决;但故障未消失</div><div class="index-contentla-arrow"><div class="index-contentla-arrowa"></div><div class="index-contentla-arrowb"></div></div><div class="index-contentla-cfx index-content-bg">故障原因002已解决;但故障未消失</div><div class="index-contentla-arrow"><div class="index-contentla-arrowa"></div><div class="index-contentla-arrowb"></div></div><div class="index-contentla-cfx index-content-bg">故障原因003已解决;故障消失</div><div class="index-contentla-arrow"><div class="index-contentla-arrowa"></div><div class="index-contentla-arrowb"></div></div><div class="index-contentla-begin">成功</div>

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。