JS
文章平均质量分 77
iamlujingtao
学而致用才是真理
展开
-
JS Promise使用注意事项
对于js而言,我们平时使用promise情况是十分常见的 ,然而有些地方并没有很好地使用,这篇文章介绍常见的promise不规范示范和正确使用方式。原创 2023-02-27 15:17:00 · 586 阅读 · 1 评论 -
js多边形算法:多边形缩放、获取中心、获取重心/质心、判断是否在多边形内、判断点排序是否顺时针等
最近做多边形相关的工作,涉及比较多相关算法,总结一下,方便大家!涉及多边形缩放、获取中心、获取重心/质心、判断是否在多边形内、判断点排序是否顺时针等原创 2022-12-14 17:18:52 · 3262 阅读 · 1 评论 -
小程序canvas 缩放/拖动/还原/封装和实例--开箱即用
之前写过web端的canvas 缩放/拖动/还原/封装和实例。最近小程序也需要用到,但凡是涉及小程序canvas还是比较多坑的,而且难用多了,于是在web的基础上重新写了小程序的相关功能。原创 2022-12-12 18:47:37 · 6176 阅读 · 2 评论 -
程序猿生成二维码的三种方法(在线接口+在线网站+本地程序)
程序猿经常在web、app、小程序等应用生成二维码,生成二维码方式有多种,如果你第一次接触,网上搜出来的基本是使用本地程序生成的,其实这种最麻烦,有更好的方式,就是使用在线接口的,简单方便快捷。...原创 2022-08-18 14:23:45 · 2097 阅读 · 0 评论 -
JS SharedWorker详细介绍/广播/Vue使用
JS SharedWorker详细介绍/广播/Vue使用原创 2021-12-22 11:03:33 · 2443 阅读 · 0 评论 -
JS Worker详细介绍及在vue中使用
javascript是单线程的,会阻塞程序执行,ajax常用于和服务器交互数据,虽然不会阻塞程序,但改不了单线程的本质。针对这个缺点,h5出了新的功能worker,支持多线程。worker可以创建子线程,子线程会在新的环境中执行,不会阻塞主线程。原创 2021-12-22 10:00:17 · 4918 阅读 · 5 评论 -
canvas 缩放/拖动/还原/封装和实例--开箱即用
canvas 缩放/拖动/还原/封装和实例一、预览二、使用2.1 创建和配置2.2 方法三、重点说明3.1 配置里有2个宽高设置3.2 分开设置事件四、源码一、预览最近需要用到canvas的缩放、拖动、还原等操作,网上有些资料,但用起来都不太方便,自己重新写了一个操作类,能满足上述使用情况,而且用起来很方便,也很灵活,画布尺寸和css尺寸不一致情况也考虑到,拖动支持触摸和鼠标。效果如下:二、使用2.1 创建和配置 // 创建对象并进行配置 var canvas = new CanvasOpe原创 2021-08-13 21:02:18 · 4039 阅读 · 2 评论 -
腾讯地图开发-三维多边形的添加、选取、展示
腾讯地图开发-三维多边形的添加、选取、展示一、效果展示二、核心代码讲解1、引入地图api2、初始化地图3、隐藏比例尺和腾讯地图logo4、获取点坐标5、添加三维多边形6、多边形选取及高亮风格7、添加文字三、源码一、效果展示二、核心代码讲解1、引入地图api<script src="https://map.qq.com/api/gljs?v=1.exp&key=你的开发key&libraries=geometry"></script>其中key通过腾讯地原创 2021-05-20 10:21:10 · 2415 阅读 · 1 评论 -
echarts 柱状图添加排序图标/序号
echarts 柱状图添加排序图标/序号一、实现效果二、核心代码(图片序号)三、核心代码(文字序号)四、源码(这里用了vue)一、实现效果使用echarts的柱状图实现下面效果,须在名称前面添加序号:二、核心代码(图片序号)核心代码在于配置属性中的 axisLabel,需要formatter 和 rich 属性配合,注意看代码注释formatter中格式化为 {a1| 张三 }然后rich中通过匹配 a1来配置序号样色,这里使用了图片,所以 backgroundColor 里设置image路径原创 2021-05-18 14:45:21 · 6529 阅读 · 5 评论 -
typescript 提示 Object is possibly ‘null‘ 的N种解决方法
document.querySelector('.main-table').setAttribute('height', '300px');如上,我要设置某元素的高度,但typescript提示 Object is possibly ‘null’,是因为可能不存在选择元素的情况。解决方案一最正确的解决方案,就是加null的判断const table = document.querySelector('.main-table');if (table) { table.setAttribute('原创 2020-12-03 21:34:32 · 21397 阅读 · 3 评论 -
解决js类定义里面绑定事件this指向问题
问题分析最近一个js问题困扰了2小时:现在我们需要定义一个类,类里面初始化对象时会绑定事件,然后销毁方法会解绑事件,精简代码如下:(这里使用es6定义类的方式,使用原始的function思路也是一样的)class Test { constructor() { this.width = 0; } //初始化对象时使window绑定事件resize,设置对象宽度 init(...原创 2020-03-04 10:35:26 · 2268 阅读 · 2 评论 -
js+animate.css实现滚动页面,元素动态出现(附演示地址和源码)
js+animate.css实现滚动页面,元素动态出现(附演示地址和源码)一、背景二、效果三、原理四、在线演示和源码一、背景之前做项目用到滚动页面,元素动态出现的效果,当时研究一番决定用Animate.css + fullpage.js + 一堆js控制,这段时间也有项目也有这种需求,不过不是整页滚动,而是不确定高度滚动,所有用不到fullpage,于是只能手写js控制。二、效果三、原理...原创 2019-10-17 10:54:38 · 6905 阅读 · 1 评论 -
html5获取我的位置并在百度地图上显示
HTML5获取我的位置并在百度地图上显示一、前言二、在线演示和GitHub源码一、前言最近有兴趣研究了下移动端的地图api,发现其实挺简单的,HTML5也提供了地理位置API:Geolocation,能获取当前所在位置的经纬度,结合一些地图api,就能直观地看到我在地图上所在的位置,相当于app应用里面的“我的位置”。在网上搜下Geolocation就能获得详细信息,其实核心就是这个:nav...原创 2019-10-16 09:03:45 · 834 阅读 · 0 评论 -
javascript结合css3制作手机菜单左滑特效(附演示地址和源码)
javascript结合css3制作手机菜单左滑特效(附演示地址和源码)一、前言二、在线演示和GitHub源码三、原理说明四、核心代码一、前言现在我们见过很多手机展示菜单的方式是整个页面向左滑动,然后右侧出现菜单,然后点击或者向右滑动左侧页面收起菜单。这种菜单用户体验比较好,现在一些针对手机端框架都包含了这种效果,例如jqm,但我们实际开发的时候往往只需要这一个效果,如果调用整个框架,总感觉有...原创 2019-10-15 14:39:59 · 579 阅读 · 0 评论 -
基于superslide的文字动画全屏焦点图(附演示地址和源码)
基于superslide的文字动画全屏焦点图一、前言二、在线地址及GitHub源码三、核心代码讲解一、前言对于焦点图,我们平时用superslide已经能实现大部分效果,但有时候想实现些更绚丽的效果,例如现在一些流行的焦点图都有切换图片后几段文字(图片)独立动画出现,这样有视觉差异,动画效果更生动,其实如果你熟悉js,那么在superslide的基础上也可以做出一样的效果。思路就是利用sup...原创 2019-10-15 13:58:48 · 637 阅读 · 0 评论 -
javascript移动设备触屏画板(附演示地址和源码)
javascript移动设备触屏画板(附演示地址和源码)一、前言二、在线演示和GitHub源码三、示例核心代码一、前言上篇学习了 《javascript移动设备触屏事件及练习》后,我们初步了解了触屏事件。这次我们这基础上打造一款有触摸功能的画板,好让我们的艺术细胞发扬广大。触摸事件我们用到“touchstart、touchmove、touchend”,而画板我们用到html5的“canv...原创 2019-10-15 12:05:27 · 585 阅读 · 3 评论 -
javascript移动设备触屏事件练习(附演示地址和源码)
javascript移动设备触屏事件及练习一、前言二、触摸事件简单介绍三、在线演示和GitHub源码四、示例核心代码一、前言对于写原生js代码或者理解触摸事件原理的人员来说,记录移动端触摸事件的核心内容及写下有实用意义的demo是十分有必要的,本文仅做简单介绍和demo演示,用于日后需要的时候使用。二、触摸事件简单介绍核心是如下几个事件:touchstart - 触摸开始touchen...原创 2019-10-15 11:45:29 · 279 阅读 · 0 评论 -
jQuery横向/纵向滚屏特效练习(附demo源码)
jQuery横向/纵向滚屏特效练习(附demo源码)一、前言二、效果三、在线演示和源码一、前言横向/纵向滚屏特效现在挺常见的,应用的地方也很多。虽然网上已有相关插件,但个人还是自己做了2个demo,供练习和需要的时候使用,如有兴趣你也可以下载源码来看看。可以鼠标点击/划过导航或者滚轮切换屏幕。二、效果三、在线演示和源码–>在线演示–>GitHub源码...原创 2019-10-15 11:13:28 · 312 阅读 · 0 评论 -
jQuery百叶窗效果原理(附3个demo源码)
jQuery百叶窗效果原理,附3个demo源码一、前言二、原理图解三、在线演示及源码一、前言对于轮播图切换,其实可以有更多效果,其中一类型就是百叶窗。本人参考了网上一些特效,做一些练习和实践,没有封装函数,考虑扩展到SuperSlide。重点是实现效果的思路,并不是代码,掌握了思路可以扩展无限种效果。二、原理图解三、在线演示及源码效果:–>在线演示地址–>GitHub...原创 2019-10-15 10:48:34 · 469 阅读 · 0 评论 -
setTimeout、promise、async/await 实例代码对比及图解
setTimeout、promise、async/await 实例代码对比及图解一、前言二、实例代码2.1 setTimeout代码2.2 promise代码2.3 async/await 代码三、执行效果四、执行过程图解4.1 promise图解4.2 async/await 图解五、总结一、前言setTimeout、promise、async/await 都是js的异步机制,对于三者的原理...原创 2019-10-13 23:47:02 · 291 阅读 · 0 评论 -
web模拟战旗游戏战场(附演示地址&源码)
前言本人从小受到“火焰纹章”、“机器人大战”等熏陶,比较喜欢策略型游戏,但有时候玩人家的游戏总有点不尽人意,于是尝试模拟这类型游戏。本次尝试用web技术实现战旗游戏中战场的游戏逻辑。先放成果:在线地址游戏逻辑战旗游戏逻辑比较简单:一、总方向单位:我方 vs 敌方操作:移动+行动结束条件:一方团灭二、实现细节地图:底图 + 操作层 + 单位层单位放置:随机地图 + 随机单位属...原创 2019-09-18 17:27:33 · 629 阅读 · 0 评论 -
js继承最实用的2种方式:Es5对比Es6,学会这2种可以解放人生了
前言js 的继承老生常谈了,网上也总结了很多继承方法,有原型继承、原型链继承、寄生继承、构造函数继承、组合继承等,各种方法各有利弊,现在ES6提出了新的继承机制,完美摆平了这乱七八糟的局面,但是ES6还没能兼容所有浏览器,所以笔者分别用ES5和ES6写出2种完整继承的方法,学会这2个即可。实例代码具体看代码和注释,不明的地方百度即可,可以把代码拷贝到本地运行,看效果: //ES5组合继承...原创 2019-09-18 16:15:40 · 234 阅读 · 0 评论