利用前端实现流程图
概括:根据元素拼凑流程图,用于一些操作记录。有需要的小伙伴可以一起探讨,我也是写写项目遇到的东西。。嘿嘿嘿
流程图如下
//这里没有贴完 相信看了这个就知道如何拼出上面的图片了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>