前端 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);}// 记录坐标var boundThis = ele.getBoundingClientRect();// 下一个点的坐标var boundNext = eleNext.getBoundingClientRect();// 计算长度和旋转角度var x1 = boundThis.left,y1 = boundThis.top;var x2 = boundNext.left,y2 = boundNext.top;// 长度var distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1),);// 弧度var radius = Math.atan2(y2 - y1, x2 - x1);console.warn(radius, "角度");// 设置线条样式eleLine.style.width = distance + "px";eleLine.style.transform = `rotate(${radius}rad)`;});

连线的样式

<style lang="scss">
.lableNum {background-color: #ed6e6e;color: #fff;position: relative;.line {position: absolute;box-sizing: border-box;height: 2px;background-color: #e52a20;transform-origin: left center;left: 50%;top: 50%;margin-top: -1px;-ms-pointer-events: none;pointer-events: none;z-index: -1;}
}
</style>

最后组合起来(画线方法抽离)

import { fnLineChart } from "./fun.ts";...watch(() => data.TrendIndex,value => {nextTick(() => {let eleDots = document.querySelectorAll(".lableNum");fnLineChart(eleDots);});},);

封装成单独的方法函数

//画线函数
export const fnLineChart = function(eleDots: any) {eleDots.forEach((ele: any, index: number) => {const eleNext: any = eleDots[index - 1];if (!eleNext) {return;}let eleLine = ele.querySelector("i");if (!eleLine) {eleLine = document.createElement("i");eleLine.className = "line";ele.appendChild(eleLine);}// 记录坐标const boundThis = ele.getBoundingClientRect();// 下一个点的坐标const boundNext = eleNext.getBoundingClientRect();// 计算长度和旋转角度const x1 = boundThis.left,y1 = boundThis.top;const x2 = boundNext.left,y2 = boundNext.top;// 长度const distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1),);// 弧度const radius = Math.atan2(y2 - y1, x2 - x1);// 设置线条样式eleLine.style.width = distance + "px";eleLine.style.transform = `rotate(${radius}rad)`;});
};

前端 JS实现彩票开奖走势图连线相关推荐

前端彩票开奖走势图的实现
彩票开奖走势图的实现页面结构 js 部分效果图做的是移动端的VUE + Vant.走势图每一条线都是一个canvas实现的页面结构部分参数我用"***"打个码,这里tbo ...
uniapp(vue)：js实现双色球开奖走势图带连线
参考文章:JS实现彩票开奖走势图默认红球: 滑动到最右侧篮球连线: <template><view class="index"><view clas ...
基于C语言的彩票开奖小程序（附源码）_☆*往事随風*☆的博客
简易彩票开奖系统一.基本要求: 要能够实现随机产生六位处于1-33之间的彩票号码,并且可以与用户输入的号码进行校对,最终判断用户的号码可以获得多少奖金. 二.基本原理: 利用随机数函数和数组来分别产 ...
java编写一个彩票开奖的模拟程序.游戏共有两种玩法，一种是21选5，即玩家输入5个1到21内的不重复的数。另外一种玩法是6+1玩法，即要求玩家输入7个整数，代表所购买的彩票号码，最后一个是特码。
java编写一个彩票开奖的模拟程序.游戏共有两种玩法,一种是21选5,即玩家输入5个1到21内的不重复的数.另外一种玩法是6+1玩法,即要求玩家输入7个整数,代表所购买的彩票号码,最后一个是特码. 具 ...
彩票开奖结果查询接口介绍
彩票(lottery ticket)是指运用在博彩中以筹集资金为目的发行的,印有号码图形或文字,由购买人自愿按一定规则购买并确定是否获取奖励的凭证.了解了这个定义之后,彩票开奖结果查询就很好理解了. ...
彩票控接口全国彩票开奖数据接口API中心博易爱开彩网API接口集成代码调用对接教程
在做一些游戏开发的时候,经常要用到一些彩票开奖的数据做为开奖结果,自己到网上去抓,经常没多久对方网站改版了,又得修改代码,例子是从一专门做数据采集的接口去调用,希望对您有用.接口返回各种格式有json ...
Cocos2d-x 3.2 大富翁游戏项目开发-第二十四部分彩票开奖
每隔N个回合,彩票开奖一次,每期开奖奖金固定5万,暂不累积.摇奖效果一般,以后考虑用物理引擎实现 1.定义彩票开奖类 bool LotteryPublish::init() {addItemSprit ...
高频彩票开奖api高频彩票最新开奖查询XML格式
高频彩票开奖api调用代码返回示例,查询高频彩种实时开奖结果. 接口名称:高频彩票开奖api 接口平台:API接口接口地址:http://api.kxmt.net 支持格式:json/xml 请求方 ...
一步一步教你写股票走势图——K线图五（高亮联动二）
目录一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...

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

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

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

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

连线的样式

最后组合起来(画线方法抽离)

前端 JS实现彩票开奖走势图连线相关推荐

最新文章

热门文章

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

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

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

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

连线的样式

最后组合起来(画线方法抽离)

前端 JS实现彩票开奖走势图 连线相关推荐

最新文章

热门文章

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

前端 JS实现彩票开奖走势图连线相关推荐