前端 JS实现彩票开奖走势图 连线

之前做过一个用canvas实现的走势图效果，这次直接用JS实现吧。(在vue3 + TS的项目中实现的)

一、渲染页面的时候把需要连线的点加上“标记”类名

二、找出所有的“标记”类名

这里要注意，DOM节点没渲染完成是会拿到空的

               let eleDots = document.querySelectorAll(".lableNum");

三、创建连线（画线方法）

这里要注意，创建出来的 i 标签的样式不要写在带有 scoped 的style里

                eleDots.forEach((ele, index) => {
   
                    let eleNext = eleDots[index - 1];
                    if (!eleNext) {
   
                        return;
                    }
                    var eleLine = ele.querySelector("i");
                    if (!eleLine) {
   
                        eleLine = document.createElement("i");
                        eleLine.className = "line";
                        eleLine.setAttribute("line", "");
                        ele.appendChild(eleLine