- 博客(76)
- 资源 (1)
- 问答 (4)
- 收藏
- 关注
RSS订阅原创 JavaScript实现扁平数组与树结构的相互转换
在解决扁平数组与树结构之间的转换问题时，关键在于识别父子关系并通过建立索引或映射结构进行层次遍历，以实现数据的转换。在实际业务中，扁平数组与树结构的转化，常见在目录树组件，级联选择组件等情况。
2024-04-06 21:17:52
438
3
原创 JavaScript 中的复制粘贴操作
在日常业务开发，比如复制后增加版权信息，点击复制，等场景中需要进行复制粘贴的操作，以下是几种实现方案。Clipboard APIClipboard API 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。从权限 API (Permissions API) 获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不允许读取剪贴板内容。可以使用全局的 Navigator.clipboard 来访问剪贴板。Navigator.clipboard 属性返回 Clipboard 对象，所
2021-09-01 16:31:18
1453
原创 JavaScript中对光标和选区的操作
在一些业务场景，比如高亮文本、输入编辑、等场景中需要对光标和选区进行操作时，可以使用浏览器提供的 Selection 对象和 Range 对象来操作光标和选区。Selection 对象Selection 对象表示用户选择的选区或插入符号的当前位置，它可能横跨多个元素。//获取 Selection 对象window.getSelection();用户可能从左到右（与文档方向相同）选择文本或从右到左（与文档方向相反）选择文本。anchor （锚点）： 指向用户开始选择的地方。focus （焦点
2021-06-18 16:12:56
1619
原创 JavaScript导出excel文件，并修改文件样式
说明因为最近需要实现前端导出 excel 文件，并且对导出文件的样式进行一些修改，比如颜色、字体、合并单元格等，所以我找到了 xlsx-style 这个项目，它可以对导出的 excel 文件进行一些样式上的修改，这个项目是 SheetJS 的一个分支。其实 SheetJS 也是支持修改导出文件的样式的，不过是在它的专业版中， SheetJS 分为社区版和专业版的，社区版是开源的，但是却不支持修改导出文件的样式，专业版拥有更多的功能，这其中就包括修改样式，但是如果需要使用专业版，要邮件联系 SheetJS
2020-05-28 09:13:06
8188
2
原创 跨站请求伪造—CSRF
CSRF 介绍CSRF，是跨站请求伪造（Cross Site Request Forgery）的缩写，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。通常情况下，CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。CSRF 攻击示例这里有一个网站，用户可以看...
2019-11-26 10:56:47
831
1
原创 跨站脚本攻击—XSS
XSS 介绍XSS 是跨站脚本攻击（Cross Site Scripting）的简写，但是从首写字母命名的方式来看，应该取名 CSS，但这样就和层叠样式表（Cascading Style Sheets，CSS）重名了，所以取名为 XSS。XSS 攻击，一般是指攻击者通过在网页中注入恶意脚本，当用户浏览网页时，恶意脚本执行，控制用户浏览器行为的一种攻击方式。XSS 危害窃取用户Cooki...
2019-09-16 08:58:13
1134
1
原创 CSS 绘制各种形状
说明使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆，等 并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。为了容易理解，文章分为基本形状 和 组合形状来说，基本形状是比较容易实现的，而利用这些基本形状进行组合，就可以实现稍微复杂点的组合形状了。基本形状三角形.triangle { width: 0; height: 0; border: 50p...
2019-06-19 17:45:17
457
原创 学习 PixiJS — 小精灵冒险
说明玩游戏小精灵冒险！在本章的源文件（pixiePerilousness.html）中，您可以使用本书中学到的大多数工具制作一个简单游戏的绝佳示例。点击屏幕让小精灵飞起来，帮助她在15个支柱的间隙中导航到达终点，如图7-7所示。当她飞过球场时，跟随着她的多彩仙女尘埃的痕迹。如果她撞到其中一块绿色的砖块，她会在一阵灰尘中爆炸。但是，如果她设法通过所有15个支柱之间日益缩小的差距，她会达到一个巨大的...
2019-03-11 21:19:14
1337
原创 学习 PixiJS — 交互工具
说明Pixi 内置一组功能有限的用于鼠标交互和触摸交互的方法，但是对于游戏和应用程序所需的丰富交互性，建议使用第三方库来简化操作，这篇文章介绍的是 Tink 库，它有通用的 Pointer 对象、拖放精灵、按钮对象、键盘控制 等一些有用的功能。使用 Tink 库要开始使用 Tink ，首先直接用 script 标签，引入 js 文件。<script src="ht
2019-03-04 21:54:49
3051
1
原创 学习 PixiJS — 碰撞检测
说明碰撞检测，用来检查两个精灵是否接触。Pixi 没有内置的碰撞检测系统， 这里我们使用一个名为 Bump 的库，Bump 是一个易于使用的2D碰撞方法的轻量级库，可与Pixi渲染引擎一起使用。它为你提供了制作大多数2D动作游戏所需的所有碰撞工具。使用 Bump 库要开始使用 Bump ，首先直接用 script 标签，引入 js 文件然后创建它的实例，在构造函数中提供要使用的渲染器（d...
2019-02-25 11:33:51
2768
1
原创 学习 PixiJS — 补间动画
说明补间动画指的是，我们可以为精灵的位置，比例或alpha 等属性，设置开始值和结束值，中间需要的动画帧由计算机自动计算填充。Pixi 没有内置补间引擎，但是你可以使用很多很好的开源的补间库，比如 Tween.js 和 Dynamic.js 。如果要制作非常专业的自定义补间效果，请使用这两个库中的任何一个。但是现在我们要使用的是一个名为 Charm.js 的专门用于 Pixi 的补间库。使用...
2019-02-18 15:05:29
2709
1
原创 学习 PixiJS — 视觉效果
平铺精灵平铺精灵。这些是特殊的精灵，以网格图案在其表面上重复图像。您可以使用它们轻松创建无限滚动的背景效果。要创建平铺精灵，请使用带有三个参数的TilingSprite类（PIXI.extras.TilingSprite）：纹理，宽度和高度。let tilingSprite = new TilingSprite(texture, width, height);除此之外，平铺精灵具有与常规精...
2019-02-03 08:43:39
6001
3
原创 学习 PixiJS — 粒子效果
你如何创造火，烟，魔法和爆炸等效果？你制作了许多小精灵，几十，几百，甚至上千个精灵。然后对这些精灵应用一些物理效果，使它们的行为类似于你尝试模拟的元素。你还必须给他们一些关于它们应该如何出现和消失以及应该形成什么样的模式的规则。这些微小的精灵被称为粒子。你可以使用它们为游戏制作各种特效。使用 Dust 库Pixi 没有内置的制作粒子效果的功能，但你可以使用一个名为 Dust 的轻量级的库来帮助...
2019-01-22 08:34:51
2846
1
原创 学习 PixiJS — 精灵状态
精灵状态如果你有复杂的游戏角色或交互式对象，你可能希望该角色根据游戏环境中发生的情况以不同的方式运行。每个单独的行为称为状态。如果你在精灵上定义状态，那么只要游戏中出现与该状态相对应的事件，就可以触发这些状态。比如，通过键盘的方向键控制一个游戏角色时，按下左箭头，角色就向左移动，其实可以理解为，按下左键头时，触发了角色的向左的状态。如果要开始使用精灵状态，首先需要一个状态播放器。状态播放器...
2019-01-19 17:41:00
3248
1
原创 学习 PixiJS — 动画精灵
说明看完官方教程中提到的这本书 — Learn Pixi.js ，准备写写读后感了，官方教程中所说的内容，基本上就是书的前4章，所以我就从第5章开始写写吧。...
2019-01-14 08:38:25
5756
1
原创 开始学习 PixiJS
PixiJSPixi是一个超快的2D渲染引擎。这意味着什么呢？这意味着它会帮助你用JavaScript或者其他HTML5技术来显示媒体，创建动画或管理交互式图像，从而制作一个游戏或应用。它拥有语义化的，简洁的API接口并且加入了一些非常有用的特性。比如支持纹理贴图集和为精灵（交互式图像）提供了一个简单的动画系统。它也提供了一个完备的场景图，你可以在精灵图层里面创建另一个精灵，当然也可以让精灵响应...
2018-11-26 20:47:39
1920
2
原创 用 canvas 的 getImageData 做点有趣的事
说明 canvas元素标签强大之处在于可以直接在HTML上进行图形操作，具有极大的应用价值。canvas 可以实现对图像的像素操作，这就要说到 getImgData 方法了。解释CanvasRenderingContext2D.getImageData() 返回一个 ImageData 对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy...
2018-09-19 09:38:26
6362
1
原创 学习 canvas 的 globalCompositeOperation 做出的神奇效果
说明最早知道 context 的 globalCompositeOperation 属性，是在实现一个刮刮卡效果的时候，这次又学习一次，希望能加深理解吧。先来看下 context 的 globalCompositeOperation 属性，具体是干什么的吧。...
2018-08-30 13:41:08
3854
2
原创 小程序—九宫格心形拼图
说明前几天在朋友圈看到好几次这种图片。 这种图片，是用九张图片拼成的一个心形。 感觉很有趣，就上网查了查怎么做，大部分的说法就是用美图秀秀的拼图功能来做， 在微信小程序中也有专门做心形拼图的小程序，我都试了试之后，感觉还可以更加简单一些，于是我就自己做了个小程序。实现小程序的思路1、有两个 canvas，一个小的 canvas 显示最后会是什么样子，一个大的 canv...
2018-07-31 15:10:06
6948
1
原创 毕业一年时的反思
这篇文章，想对毕业后的这第一年做一个总结，也算反思反思，这篇文章不会提任何的技术，但是讲的笑话会挺多。开始正文。某一段时间，我的办公室变得非常的大，我估算应该是有 400 平米了，恩，我没有写错是400，我和同学开玩笑说，我是 * * 8楼扛把子，你要是来找我，空调你随便开，位置你随便坐。 为什么我的办公室那么大？？？ 按老板的意思说，我是经历住考验的人，那会我们公司在一个重创空间里创...
2018-07-14 19:29:45
856
8
原创 JavaScript中的函数重载（Function overloading）
说明JavaScript 中没有真正意义上的函数重载。函数重载 函数名相同，函数的参数列表不同(包括参数个数和参数类型)，根据参数的不同去执行不同的操作。 我们举个例子看看function overload(a){ console.log('一个参数')}function overload(a,b){ console.log('两个参数')}// 在...
2018-07-10 15:46:04
3009
1
原创 一个浪漫又悲情的爱情故事——笛卡尔心形线
说明写这篇文章是某天看到这样一个公式 r=a(1-cosθ) ，我上网搜了下，原来是笛卡尔心形线的极坐标方程，这个方程里的确有一个浪漫又悲情的爱情故事，感兴趣的朋友可以点这里看看，而至于这个故事是真是假，这 并不重要。而这篇文章的目的是要用前端的方式，画出笛卡尔心形线。 本来我想，这么经典的公式，网上应该已经有人实现过了的吧。 我搜了搜，不得不佩服网友们，有 Java 实现的，有 C#...
2018-06-06 10:52:50
74524
10
原创 CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析
说明opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。 opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见，但是他们在方方面面都还是有区别的。是否占据页面空间例子<!doctype html&a
2018-05-27 21:41:30
4160
1
原创 JavaScript实现爆炸碎片的 图片切换 效果
说明和大家分享一个看上去很酷的效果，先来看效果图吧！ 解释实现这个效果的思路就是，一个大的div元素，设置好一个背景，生成一定数量小的div元素，背景设置成同样的图片，但是每个小div元素的 background-position 属性值不同，整齐的覆盖在大的div元素上，这样就能拼成一张完整的背景图，鼠标移入时，让所有小的div元素移动和变形。 总的来说就是两步： 1...
2018-05-09 10:58:37
5159
1
原创 JavaScript实现 超范围的数 相加
问题实现 字符串类型的数字 相加的一个方法。 比如： 输入 '11111111111111111' ，'22222222222222222'， 返回 '33333333333333333'解决思路JavaScript 能表示的最大安全整数是 9007199254740991，可以用API Number.MAX_SAFE_INTEGER 看一下 超出范围就会发生精度丢失，...
2018-04-27 11:34:02
2842
原创 canvas实现漂亮的下雨效果
说明这篇文章说如何用canvas画出漂亮的下雨效果，先看看最后实现的效果吧。 效果图 解释看图来分析下，我们需要实现哪些效果。 1、雨滴下落效果，移动鼠标控制下落方向 2、雨滴下落散成小水珠，小水珠的移动方向和鼠标移动方向相同 3、雨滴下落到鼠标坐标一定范围内，散成小水珠，同样的，小水珠的移动方向也和鼠标移动方向相同好的，我们把整个效果大致拆分成三个效果，实现这三个...
2018-04-15 12:03:44
7707
21
原创 JavaScript实现冒泡排序 可视化
说明上次写了 JavaScript实现冒泡排序 ，只是简单的说了冒泡排序算法是什么，怎么实现，这次来实现将冒泡排序的过程展现出来。解释先来个简单的版本，看效果图 实现这个效果，思路是这样的 1、先将需要排序的数组，进行冒泡排序，记录每一步的内容，存放在一个数组中 2、利用canvas，实现一个 darw 方法，能将一步的内容画到页面上 3、实现动画效果，利用定时器，每...
2018-04-02 10:05:28
3860
3
原创 JavaScript实现冒泡排序
说明对数组进行 冒泡排序 算是比较简单的，冒泡排序也是容易理解的一种排序算法了，在面试的时候，很可能就会问到。实现原理 比较每相邻两个数，如果前者大于后者，就把两个数交换位置；这样一来，第一轮就可以选出一个最大的数放在最后面；那么经过 n-1（数组的 length - 1） 轮，就完成了所有数的排序。好的，我们先来实现找数组中的最大数，并把他放到数组最后。va...
2018-03-18 16:44:00
34316
4
原创 JavaScript实现 满天星 导航栏
说明分享一个满天星导航栏的效果，代码不多，但效果挺好看，先看看效果图吧。 解释实现这个效果，需要掌握的知识不用很多，知道简单的CSS，会用JS 获取元素， 能绑定事件基本就足够了。 好的，我们直接来看代码，注释已经写的很详细了，不想看有注释的，点这里。
2018-03-05 16:49:23
1449
1
原创 jQuery中的isPlainObject()方法 实现原理
说明jQuery中的isPlainObject() 函数用于判断指定参数是否是一个纯粹的对象，返回值为Boolean类型。“纯粹的对象”，就是通过 { }、new Object()、Object.create(null) 创建的对象。 这个方法的作用是为了跟其他的 JavaScript对象如 null，数组，宿主对象（documents），DOM 等作区分，因为这些用 typeof ...
2018-02-25 09:48:29
1040
原创 简单说 JavaScript中的事件委托（下）
说明上次我们说了一些，关于 JavaScript中事件委托的 基础知识，这次我们继续来看。 解释先来一段代码<!doctype html><html lang="en"> </head> <body> <ul id=ul&gt
2017-12-22 10:33:58
442
原创 简单说 JavaScript中的事件委托（上）
说明这篇文章说JavaScript中的事件委托，这次先说一些比较基本的知识。 事件委托 是什么先来看看事件委托的概念 事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。事件委托，你叫他 事件代理 也可以，都是一个意思。 事件：JavaScript 侦测到的行为就是事件，比如鼠标点击、某个键盘的键被按下、元素获得焦点。 委托：就是把原来自己做的事，交给别人做
2017-12-17 15:36:54
483
原创 简单说 JavaScript实现雪花飘落效果
说明这次实现的雪花飘落的效果很简单，主要是为了练习练习JavaScript中的定时器，setTimeout 和 setInterval。 效果图解释setTimeout() setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。 var timerId = setTimeout(func|code, delay
2017-11-30 12:08:46
5432
1
原创 简单说 chrome浏览器 必知必会的小技巧
说明这篇文章主要介绍的就是一些chrome浏览器的小技巧，很简单，希望对大家有所帮助。 这其中的一些小技巧在低版本中是没有的，所以建议大家用最新版的，目前最新版是62，版本很重要，如果发现有些技巧不起作用，请先查看浏览器的版本。 快捷键快捷键比较多，这里挑出几个常用的说一下 最后会给出一张比较完整的快捷键的表 下列快捷键可以在所有 开发者工具 面板中可以使用 全局快捷键 w
2017-11-24 12:00:08
34666
1
原创 简单说 JavaScript的箭头函数
说明箭头函数本质还是函数，我们来看看他与JavaScript中普通函数的区别，先看看写法上的区别。 解释写箭头函数，我们记住一个顺序就好，参数、箭头、函数体、这个顺序记住就足够了，参数、箭头、函数体、这三个是必须的，函数名可以没有，但这三项必须有，一些简写的方式也是简写这三项里的东西。 简写1、只有一个参数时，() 可省略 //不简写va...
2017-11-12 21:27:28
2974
12
原创 简单说 通过CSS实现 文字渐变色 的两种方式
说明这次的重点就在于两个属性， background 属性 mask 属性 这两个属性分别是两种实现方式的关键。 解释方式一效果图 代码 <!DOCTYPE html><html><head> <meta charset="utf-8"> <style> span { background: linear-gradient
2017-11-05 17:48:09
70920
6
原创 简单说 通过CSS的滤镜 实现 火焰效果
说明上次我们了解了一些css滤镜的基础知识， 简单说 CSS滤镜 filter属性 这次我们就来用css的滤镜实现一个 火焰的效果。 解释 要实现上面的火焰效果，我们先来了解一些必要的东西。 上次我们说过两个滤镜，blur 和 contrast。 blur 是给图像设置高斯模糊， contrast 是调整图像的对比度， 他们一起使用会产生融合的效果。 效果图 图中 红色
2017-10-27 14:51:04
67712
1
原创 简单说 CSS滤镜 filter属性
说明滤镜主要是用来实现图像的各种特殊效果，css的滤镜是很神奇的。解释css的滤镜，也就是filter属性，主要有下面这几个属性值 blur（模糊） brightness（亮度） 注意：值是100%，图像无变化。超过100%，变亮，小于100%，变暗。 contrast（对比度） 与brightness 一样 contrast 100%，图片无变化。 drop-shad
2017-10-22 09:45:07
69347
原创 简单说 CSS中的 object-fit 与 object-position
说明问题： 一个div宽度不固定，高度固定，采用Flex布局，它里面有两个元素一个img宽度占40%，高度占100%，一个p元素，宽度占60%，高度占100%，调整浏览器窗口大小，要保证，img元素不变形，宽高比不变，怎么办！ 从图中可以看出，随着调整浏览器窗口，图片的宽高比也被破坏了，我们该怎么办呢？我想大家应该会想到用 background，用一个div的background来替代im
2017-10-16 14:04:08
66411
1
chrome 插件 LivePage 自动刷新
2017-09-27
通过js 控制 css的方法疑问
2017-09-08
微信分享功能怎么实现
2017-07-01
打开Sublime 默认的文件格式
2017-06-08
phpStorm怎么全局替换，Windows版本的PHPStorm
2017-05-25
TA创建的收藏夹 TA关注的收藏夹
TA关注的人