- 博客(50)
- 收藏
- 关注
RSS订阅原创 echarts中tooptips提示框超出了怎么解决
也就是说，当提示框的位置计算出来可能超出图表范围时，会自动调整提示框的位置，确保提示框完全在图表的可视范围内。这两个配置结合起来，可以在一定程度上解决提示框内容显示不完整的问题，尤其是当提示框的内容较多或者提示框容易超出图表区域的情况。：这个配置的作用是让提示框（tooltip）限制在图表的区域内。完美解决，撒花~~~
2024-09-14 10:20:23
383
原创 js小数相加精度不准确的解决方案
JavaScript 中的Number类型采用IEEE 754标准来表示浮点数，这个标准定义的是双精度浮点数，它能够表示的数值范围非常广泛，而这个标准在处理一些特别大或特别小的数时会出现舍入错误，所以计算机无法准确表示的小数有 0.1、0.2 或 0.3 这样的数字，因为它使用的是二进制浮点格式。其实在我们日常生活中通常使用10进制来进行计算，我们会发现当10除以2或者5的倍数时才可以被精确的表示，例如1/2、1/4、1/5、1/8 和 1/10等。但是 1/3、1/6 和 1/7 则是无限循环的小数。
2024-08-07 10:10:37
1209
原创 uniapp入门超详细教程：如何从零开始搭建项目
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。本次章节也是博主从零开始搭建uniapp项目，在此过程进行记录，帮助后续查询同时为读者提供讲解，如有异议，欢迎留言。uni-app官网。
2024-07-19 17:05:06
7971
原创 前端常用的插件和工具类库合集
该网站展示了常见的动画样式，可以下载npm或者引入css样式，设置class名就能得到想要的样式，方便好用。与事件库, 由百度云Clouda团队维护，也是在百度内部广泛使用的开发工具.(已停更)过程中遇到的触摸,拖动,长按,滑动,手指平移,双指捏拿缩放等常见的用户手势操作。手势库专为移动设备设计,是Web移动端touch点击事件不错的解决方案.一个强大的、轻量级的用来制作动画的javascript库。CSS3 动画库，也是目前最通用的动画库。Hammer.js是一个。,它能帮我们识别出在。
2024-07-04 15:35:11
331
原创 Html5如何播放hls格式的视频
HLS（HTTP Live Streaming）是一种基于HTTP协议的流媒体传输协议，它的出现使得视频的传输更加稳定和可靠。HLS通过将整个视频分成一系列小的分片，并通过HTTP协议进行传输，从而实现了视频的实时播放和边下边播的功能。由于视频被切分成多个小的分片，客户端可以实时地获取最新的视频分片。这样做的好处是，可以将视频分片缓存在客户端，从而降低了服务端的压力。当前端需要嵌入设备视频，比如用到魔镜、萤石云、海康威视等平台，怎么能将视频地址在前端页面中播放呢，这里要引用视频播放的js。
2024-06-06 10:37:10
2061
原创 前端百度地图添加点并跳转到百度地图进行导航
this.getStatus()在安卓系统中是BMAP_STATUS_SUCCESS，其他pc和ios获取不到精准位置。前端有时候需要做地图展示，我一般用的地图是天地图和百度地图，大家可以通过官网来制作地图。其中map是放地图的容器，一定要给这个div设置宽和高，不然不显示。3.ios:网页当前位置只能获取市，但打开百度地图app是精准的。1.pc端：打开导航，位置不精准，但可以用鼠标拖动来更改路线。2.安卓：网页当前位置精准，打开百度地图app同样的。申请秘钥、 展示地图、demo参考来制作地图。
2024-05-20 10:40:28
1780
原创 前端关于location的方法以属性
关键单词作用href返回或设置当前页面的URL地址。host返回当前页面的主机名和端口号。hostname返回当前页面的主机名。port返回当前页面的端口号。protocol返回当前页面的协议。pathname返回当前页面的路径部分关键单词作用加载一个新的URL，并在浏览器历史记录中生成新的记录。加载一个新的URL，并替换当前的历史记录。reload()重新加载当前页面。toString()返回当前页面的完整URL字符串。
2024-04-29 15:41:52
1110
原创 jquery中父子页面之间获取元素（比如iframe页面）
当前端主页面需要嵌套一个子页面，比如iframe页面，当在父页面执行子页面的操作时，用$('#元素id')就没有效果。这时就需要用到以下知识点，来实现父子页面的相互操作。
2023-11-22 17:23:42
1576
原创 swiper获取当前页的索引值
this.activeIndex：就是当前页面的索引值，通过获取索引值，在该方法内实现需求。注意：需要将loop设为false。而且初始化的时候是不会执行该方法的，只有切换才能执行。有时候轮播图切换图片时，需要将其他部分也更改，但是不想写到轮播图里怎么办？这里就需要动态获取轮播图切换时的索引值，来更改其他部分的内容。
2023-10-24 16:01:16
2989
原创 js鼠标点击添加图标并获取图标的坐标值
给这个图片添加摄像头图标，并获取图标的坐标值，也就是图标的css样式是positon:absolute,获取left和top的值。6.应该让鼠标点击处是图标的中心，就需要获取图标中心的坐标，然后 减去图片2中箭头的距离。3.就能获取到图片2中箭头的距离，即鼠标点击的位置距背景图顶部的距离。1.鼠标点击时距浏览器的左边距离和上边距离，相当于(0,0)坐标。5.效果如下图，但是鼠标点击处是图标的左上角，感觉好像是差一点。4.计算得出图标的left和top值，这里是%。思路是这样的，获取这里的长度，
2023-10-20 14:37:20
1558
原创 select标签选择相同选项不触发onchange解决方案
想到了一个方法，就是在select下新增一个option标签，每次onchange时将select值重置为这个新增的option，这样就是每选一个将选中的值给新增的，就不存在选相同的了。在谷歌浏览器中可以实现select标签下选择相同选项就能触发onchange事件，但在火狐浏览器中select不回显选项内容。
2023-09-13 10:04:16
1861
原创 transform导致百度地图缩放发生偏移解决方案
试了很多种方法都无效，最终是把地图提取出来，新建一个html文件，然后用iframe标签来引用新的页面，这样的话地图进行鼠标缩放的时候，就不会发生偏移了。制作可视化大屏的时候，会用到transform来实现自适应，那么就导致了地图缩放时发生偏移，体验感很差。
2023-06-07 15:44:26
1192
原创 前端常用的配色网站和设计网站
该网站集合了超级多颜色柔和的渐变色，可以直接复制css样式，十分的方便。二、传统的中国风颜色，拥有中国特色的颜色名称，网页设计也非常有意思。的颜色调和网站，可以根据需要选择一种或多种的颜色配色规则。选中一个颜色，整个网站背景都会随之变化，效果超级棒！
2023-04-20 14:58:34
3293
原创 使用jquery获取url及url参数的方法
今天在用上面的方法获取url中的参数时，url中传递的中文参数在解析的时候无论怎么测试，获取的都是乱码。经过一番调试后发现，我再传递参数时，对汉字编码使用的是 encodeURI ，而上面的方法在解析参数编码时使用的是unescape ,修改为 decodeURI 就可以了。明白了javascript获取url参数的方法，我们可以通过这个方法为jquery扩展一个方法来通过jquery获取url参数，下面的代码为jquery扩展了一个getUrlParam()方法。
2022-09-28 09:40:17
10809
原创 echarts制作3D锥形金字塔
工作中遇到了这样的问题，需要绘制3D金字塔，如图所示：echarts可以做平面的金字塔和漏斗图，但是3D金字塔在官网上并没有看到相关案例。查了相关资料，用象形柱状图来实现
2022-07-08 09:57:20
10266
16
原创 解决option添加onclick事件失效
当想要给select中的option添加onclick事件时，你会发现点击事件在火狐浏览器中是好的，但在谷歌浏览器是失效的，这是谷歌对option的onclick不兼容。如下：并不执行getNum()方法，如何实现这一功能呢？首先看select 的属性 和 事件：selectedIndex 设置或返回下拉列表中被选项目的索引号。注意：索引是从0开始的。onchange 当改变选择时调用的事件句柄option 是不能支持onclick ,但select有onchange和selectedIndex
2022-07-04 14:13:01
135
原创 echarts修改样式的常见问题
一、修改x轴或y轴线的颜色。以x轴为例 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLine:{ lineStyle:{ color:'#78aaed' } } },图例：二、x轴或y轴分割线是否显示以及设置颜色。 xAxis:.
2022-03-21 14:07:28
2938
原创 css如何让滚动条样式变好看？
默认滚动条样式比较丑，长这样：如何让它变好看呢？可以通过css修改它的样式。一、默认样式页面代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div,p,html,body{ margin: 0; padding: 0; .
2021-11-30 10:46:58
2172
原创 jquery基础之易混淆知识点汇总（一）
一、.html()和.text()的区别1）.html()获取元素内的所有内容，包括标签2）.text()获取元素内的所有文本内容示例：html部分：<div class="message"> 枯藤老树昏鸦 <span class="peom">小桥流水人家</span></div>js部分：$(function(){ console.log($('.message').html()); console.log($('
2021-11-25 15:18:22
744
转载 用echarts制作中国省市区县地图展示
看官网知道echarts是可以做地图的，但是想要做某个地区的地图就有点无从下手，其实最重要的就是获取该区县边界的经纬度，也就是地图json数据，下面就讲一下怎么获取区县的地图数据。一、获取地图json数据1.方法一进入官网自行下载：Datav官网：http://datav.aliyun.com/tools/atlas...
2021-11-23 09:45:08
921
原创 echarts中tooltip自定义以及显示其他数据
1.echarts中tooltip可以显示x,y轴的相关数据的，代码如下： var option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter:function(params){ console.log(params) return params[0].name +'<br>生产量 '+ param
2021-08-27 14:02:19
16157
1
原创 js判断当前设备是移动端还是PC端
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { document.write("移动")} else { document.write("PC")}只需要这几行代码就可进行判断
2021-07-28 09:35:21
760
原创 原生js新增的classList如何使用？
.classList顾名思义,用于操作类名的。1. .classList.add( ):给元素添加类名，若已存在，则不进行添加操作2..classList.remove( ):元素移除已存在的类名。3. .classList.toggle( ):若元素存在该类名则移除，不存在则添加4..classList.contains( ）：若元素存在该类名返回true，不存在返回false。...
2021-07-26 09:21:15
723
原创 js字母和数字的相互转换
与ASCALL码对应1.字母转换成数字.charCodeAt(0)let letter = 'B';console.log(letter.charCodeAt(0));//662.数字转成成字母String.fromCharCode()let num = 65;console.log(String.fromCharCode(num));//A
2021-07-21 10:04:39
1733
原创 js实现点击事件以及this指向
首页写个button标签（div,p什么的也都可以）<button type="button">点击</button>1.通过点击事件let button = document.getElementsByTagName('button')[0];button.onclick = function(){ console.log(this);//button}this指向接收事件的元素。2.监听点击事件let button = document.g.
2021-07-14 15:43:17
1587
原创 vue防止按钮重复点击
1.新建一个plugin.js文件import Vue from 'vue'// 在vue上挂载一个指量 preventReClickconst preventReClick = Vue.directive('preventReClick', { inserted: function (el, binding) { console.log(el.disabled) el.addEventListener('click', () => { if (!el.dis
2021-06-28 15:44:55
729
原创 js中call、apply和bind的区别
三者都是用来改变this指向的。var obj = {name: 'psg'};function sum(num1,num2){ console.log(num1,num2); console.log(this);}sum(1,2);//this:window,nm1:1,num2:21.call函数.call(对象,arg1,arg2....)sum.call(100, 200); //this指向100， num1=200, num2=undefinedsum.cal
2021-06-24 14:02:00
110
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人