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

·半傻半呆半疯癫

已于 2023-07-05 19:03:23 修改

阅读量4.5k

点赞数 3

分类专栏： VUE Html5 文章标签： js typescript 前端 html5 javascript

于 2021-08-05 10:56:58 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45461674/article/details/119410694

版权

这篇博客介绍如何在Vue3 + TypeScript项目中用JS实现彩票开奖走势图的连线效果。通过在渲染页面时为需要连线的点添加特殊类名，然后找出所有标记类名的节点，接着创建连线并注意样式设置，最后将画线方法进行封装。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前做过一个用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);
                    }
                    // 记录坐标
                    var boundTh