JavaScript
文章平均质量分 88
FEWY
这个作者很懒,什么都没留下…
展开
-
JavaScript 中的复制粘贴操作
在日常业务开发,比如复制后增加版权信息,点击复制,等场景中需要进行复制粘贴的操作,以下是几种实现方案。Clipboard APIClipboard API 提供了响应剪贴板命令(剪切、复制和粘贴)与异步读写系统剪贴板的能力。从权限 API (Permissions API) 获取权限之后,才能访问剪贴板内容;如果用户没有授予权限,则不允许读取剪贴板内容。可以使用全局的 Navigator.clipboard 来访问剪贴板。Navigator.clipboard 属性返回 Clipboard 对象,所原创 2021-09-01 16:31:18 · 2190 阅读 · 0 评论 -
JavaScript中对光标和选区的操作
在一些业务场景,比如高亮文本、输入编辑、等场景中需要对光标和选区进行操作时,可以使用浏览器提供的 Selection 对象和 Range 对象来操作光标和选区。Selection 对象Selection 对象表示用户选择的选区或插入符号的当前位置,它可能横跨多个元素。//获取 Selection 对象window.getSelection();用户可能从左到右(与文档方向相同)选择文本或从右到左(与文档方向相反)选择文本。anchor (锚点): 指向用户开始选择的地方。focus (焦点原创 2021-06-18 16:12:56 · 2113 阅读 · 0 评论 -
JavaScript导出excel文件,并修改文件样式
说明因为最近需要实现前端导出 excel 文件,并且对导出文件的样式进行一些修改,比如颜色、字体、合并单元格等,所以我找到了 xlsx-style 这个项目,它可以对导出的 excel 文件进行一些样式上的修改,这个项目是 SheetJS 的一个分支。其实 SheetJS 也是支持修改导出文件的样式的,不过是在它的专业版中, SheetJS 分为社区版和专业版的,社区版是开源的,但是却不支持修改导出文件的样式,专业版拥有更多的功能,这其中就包括修改样式,但是如果需要使用专业版,要邮件联系 SheetJS原创 2020-05-28 09:13:06 · 8981 阅读 · 3 评论 -
跨站请求伪造—CSRF
CSRF 介绍CSRF,是跨站请求伪造(Cross Site Request Forgery)的缩写,是一种劫持受信任用户向服务器发送非预期请求的攻击方式。通常情况下,CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任,在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器,从而在并未授权的情况下执行在权限保护之下的操作。CSRF 攻击示例这里有一个网站,用户可以看...原创 2019-11-26 10:56:47 · 877 阅读 · 1 评论 -
学习 PixiJS — 动画精灵
说明看完官方教程中提到的这本书 — Learn Pixi.js ,准备写写读后感了,官方教程中所说的内容,基本上就是书的前4章,所以我就从第5章开始写写吧。...原创 2019-01-14 08:38:25 · 6207 阅读 · 1 评论 -
小程序—九宫格心形拼图
说明前几天在朋友圈看到好几次这种图片。 这种图片,是用九张图片拼成的一个心形。 感觉很有趣,就上网查了查怎么做,大部分的说法就是用美图秀秀的拼图功能来做, 在微信小程序中也有专门做心形拼图的小程序,我都试了试之后,感觉还可以更加简单一些,于是我就自己做了个小程序。实现小程序的思路1、有两个 canvas,一个小的 canvas 显示最后会是什么样子,一个大的 canv...原创 2018-07-31 15:10:06 · 7061 阅读 · 1 评论 -
JavaScript中的函数重载(Function overloading)
说明JavaScript 中没有真正意义上的函数重载。函数重载 函数名相同,函数的参数列表不同(包括参数个数和参数类型),根据参数的不同去执行不同的操作。 我们举个例子看看function overload(a){ console.log('一个参数')}function overload(a,b){ console.log('两个参数')}// 在...原创 2018-07-10 15:46:04 · 3788 阅读 · 1 评论 -
一个浪漫又悲情的爱情故事——笛卡尔心形线
说明写这篇文章是某天看到这样一个公式 r=a(1-cosθ) ,我上网搜了下,原来是笛卡尔心形线的极坐标方程,这个方程里的确有一个浪漫又悲情的爱情故事,感兴趣的朋友可以点这里看看,而至于这个故事是真是假,这 并不重要。而这篇文章的目的是要用前端的方式,画出笛卡尔心形线。 本来我想,这么经典的公式,网上应该已经有人实现过了的吧。 我搜了搜,不得不佩服网友们,有 Java 实现的,有 C#...原创 2018-06-06 10:52:50 · 76238 阅读 · 10 评论 -
JavaScript实现 超范围的数 相加
问题实现 字符串类型的数字 相加的一个方法。 比如: 输入 '11111111111111111' ,'22222222222222222', 返回 '33333333333333333'解决思路JavaScript 能表示的最大安全整数是 9007199254740991,可以用API Number.MAX_SAFE_INTEGER 看一下 超出范围就会发生精度丢失,...原创 2018-04-27 11:34:02 · 2942 阅读 · 0 评论 -
JavaScript实现爆炸碎片的 图片切换 效果
说明和大家分享一个看上去很酷的效果,先来看效果图吧! 解释实现这个效果的思路就是,一个大的div元素,设置好一个背景,生成一定数量小的div元素,背景设置成同样的图片,但是每个小div元素的 background-position 属性值不同,整齐的覆盖在大的div元素上,这样就能拼成一张完整的背景图,鼠标移入时,让所有小的div元素移动和变形。 总的来说就是两步: 1...原创 2018-05-09 10:58:37 · 5275 阅读 · 1 评论 -
canvas实现漂亮的下雨效果
说明这篇文章说如何用canvas画出漂亮的下雨效果,先看看最后实现的效果吧。 效果图 解释看图来分析下,我们需要实现哪些效果。 1、雨滴下落效果,移动鼠标控制下落方向 2、雨滴下落散成小水珠,小水珠的移动方向和鼠标移动方向相同 3、雨滴下落到鼠标坐标一定范围内,散成小水珠,同样的,小水珠的移动方向也和鼠标移动方向相同好的,我们把整个效果大致拆分成三个效果,实现这三个...原创 2018-04-15 12:03:44 · 7902 阅读 · 21 评论 -
JavaScript实现冒泡排序 可视化
说明上次写了 JavaScript实现冒泡排序 ,只是简单的说了冒泡排序算法是什么,怎么实现,这次来实现将冒泡排序的过程展现出来。解释先来个简单的版本,看效果图 实现这个效果,思路是这样的 1、先将需要排序的数组,进行冒泡排序,记录每一步的内容,存放在一个数组中 2、利用canvas,实现一个 darw 方法,能将一步的内容画到页面上 3、实现动画效果,利用定时器,每...原创 2018-04-02 10:05:28 · 4020 阅读 · 3 评论 -
JavaScript实现冒泡排序
说明对数组进行 冒泡排序 算是比较简单的,冒泡排序也是容易理解的一种排序算法了,在面试的时候,很可能就会问到。实现原理 比较每相邻两个数,如果前者大于后者,就把两个数交换位置;这样一来,第一轮就可以选出一个最大的数放在最后面;那么经过 n-1(数组的 length - 1) 轮,就完成了所有数的排序。好的,我们先来实现找数组中的最大数,并把他放到数组最后。va...原创 2018-03-18 16:44:00 · 35840 阅读 · 4 评论 -
jQuery中的isPlainObject()方法 实现原理
说明jQuery中的isPlainObject() 函数用于判断指定参数是否是一个纯粹的对象,返回值为Boolean类型。“纯粹的对象”,就是通过 { }、new Object()、Object.create(null) 创建的对象。 这个方法的作用是为了跟其他的 JavaScript对象如 null,数组,宿主对象(documents),DOM 等作区分,因为这些用 typeof ...原创 2018-02-25 09:48:29 · 1078 阅读 · 0 评论 -
学习 canvas 的 globalCompositeOperation 做出的神奇效果
说明最早知道 context 的 globalCompositeOperation 属性,是在实现一个刮刮卡效果的时候,这次又学习一次,希望能加深理解吧。先来看下 context 的 globalCompositeOperation 属性,具体是干什么的吧。...原创 2018-08-30 13:41:08 · 4296 阅读 · 2 评论 -
用 canvas 的 getImageData 做点有趣的事
说明 canvas元素标签强大之处在于可以直接在HTML上进行图形操作,具有极大的应用价值。canvas 可以实现对图像的像素操作,这就要说到 getImgData 方法了。解释CanvasRenderingContext2D.getImageData() 返回一个 ImageData 对象,用来描述canvas区域隐含的像素数据,这个区域通过矩形表示,起始点为(sx, sy...原创 2018-09-19 09:38:26 · 7180 阅读 · 1 评论 -
关于 ES6 中 Promise 的面试题
说明题目一原创 2018-10-29 13:12:45 · 2171 阅读 · 1 评论 -
跨站脚本攻击—XSS
XSS 介绍XSS 是跨站脚本攻击(Cross Site Scripting)的简写,但是从首写字母命名的方式来看,应该取名 CSS,但这样就和层叠样式表(Cascading Style Sheets,CSS)重名了,所以取名为 XSS。XSS 攻击,一般是指攻击者通过在网页中注入恶意脚本,当用户浏览网页时,恶意脚本执行,控制用户浏览器行为的一种攻击方式。XSS 危害窃取用户Cooki...原创 2019-09-16 08:58:13 · 1808 阅读 · 1 评论 -
学习 PixiJS — 小精灵冒险
说明玩游戏小精灵冒险!在本章的源文件(pixiePerilousness.html)中,您可以使用本书中学到的大多数工具制作一个简单游戏的绝佳示例。点击屏幕让小精灵飞起来,帮助她在15个支柱的间隙中导航到达终点,如图7-7所示。当她飞过球场时,跟随着她的多彩仙女尘埃的痕迹。如果她撞到其中一块绿色的砖块,她会在一阵灰尘中爆炸。但是,如果她设法通过所有15个支柱之间日益缩小的差距,她会达到一个巨大的...原创 2019-03-11 21:19:14 · 1443 阅读 · 0 评论 -
学习 PixiJS — 交互工具
说明Pixi 内置一组功能有限的用于鼠标交互和触摸交互的方法,但是对于游戏和应用程序所需的丰富交互性,建议使用第三方库来简化操作,这篇文章介绍的是 Tink 库,它有通用的 Pointer 对象、拖放精灵、按钮对象、键盘控制 等一些有用的功能。使用 Tink 库要开始使用 Tink ,首先直接用 script 标签,引入 js 文件。<script src="ht原创 2019-03-04 21:54:49 · 3332 阅读 · 1 评论 -
学习 PixiJS — 碰撞检测
说明碰撞检测,用来检查两个精灵是否接触。Pixi 没有内置的碰撞检测系统, 这里我们使用一个名为 Bump 的库,Bump 是一个易于使用的2D碰撞方法的轻量级库,可与Pixi渲染引擎一起使用。它为你提供了制作大多数2D动作游戏所需的所有碰撞工具。使用 Bump 库要开始使用 Bump ,首先直接用 script 标签,引入 js 文件然后创建它的实例,在构造函数中提供要使用的渲染器(d...原创 2019-02-25 11:33:51 · 3045 阅读 · 1 评论 -
学习 PixiJS — 补间动画
说明补间动画指的是,我们可以为精灵的位置,比例或alpha 等属性,设置开始值和结束值,中间需要的动画帧由计算机自动计算填充。Pixi 没有内置补间引擎,但是你可以使用很多很好的开源的补间库,比如 Tween.js 和 Dynamic.js 。如果要制作非常专业的自定义补间效果,请使用这两个库中的任何一个。但是现在我们要使用的是一个名为 Charm.js 的专门用于 Pixi 的补间库。使用...原创 2019-02-18 15:05:29 · 2980 阅读 · 1 评论 -
学习 PixiJS — 视觉效果
平铺精灵平铺精灵。这些是特殊的精灵,以网格图案在其表面上重复图像。您可以使用它们轻松创建无限滚动的背景效果。要创建平铺精灵,请使用带有三个参数的TilingSprite类(PIXI.extras.TilingSprite):纹理,宽度和高度。let tilingSprite = new TilingSprite(texture, width, height);除此之外,平铺精灵具有与常规精...原创 2019-02-03 08:43:39 · 6357 阅读 · 3 评论 -
学习 PixiJS — 粒子效果
你如何创造火,烟,魔法和爆炸等效果?你制作了许多小精灵,几十,几百,甚至上千个精灵。然后对这些精灵应用一些物理效果,使它们的行为类似于你尝试模拟的元素。你还必须给他们一些关于它们应该如何出现和消失以及应该形成什么样的模式的规则。这些微小的精灵被称为粒子。你可以使用它们为游戏制作各种特效。使用 Dust 库Pixi 没有内置的制作粒子效果的功能,但你可以使用一个名为 Dust 的轻量级的库来帮助...原创 2019-01-22 08:34:51 · 3026 阅读 · 1 评论 -
学习 PixiJS — 精灵状态
精灵状态如果你有复杂的游戏角色或交互式对象,你可能希望该角色根据游戏环境中发生的情况以不同的方式运行。每个单独的行为称为状态。如果你在精灵上定义状态,那么只要游戏中出现与该状态相对应的事件,就可以触发这些状态。比如,通过键盘的方向键控制一个游戏角色时,按下左箭头,角色就向左移动,其实可以理解为,按下左键头时,触发了角色的向左的状态。如果要开始使用精灵状态,首先需要一个状态播放器。状态播放器...原创 2019-01-19 17:41:00 · 3451 阅读 · 1 评论 -
开始学习 PixiJS
PixiJSPixi是一个超快的2D渲染引擎。这意味着什么呢?这意味着它会帮助你用JavaScript或者其他HTML5技术来显示媒体,创建动画或管理交互式图像,从而制作一个游戏或应用。它拥有语义化的,简洁的API接口并且加入了一些非常有用的特性。比如支持纹理贴图集和为精灵(交互式图像)提供了一个简单的动画系统。它也提供了一个完备的场景图,你可以在精灵图层里面创建另一个精灵,当然也可以让精灵响应...原创 2018-11-26 20:47:39 · 2100 阅读 · 2 评论 -
JavaScript实现 满天星 导航栏
说明分享一个满天星导航栏的效果,代码不多,但效果挺好看,先看看效果图吧。 解释实现这个效果,需要掌握的知识不用很多,知道简单的CSS,会用JS 获取元素, 能绑定事件基本就足够了。 好的,我们直接来看代码,注释已经写的很详细了,不想看有注释的,点这里。原创 2018-03-05 16:49:23 · 1566 阅读 · 1 评论 -
简单说 如何做一个chrome 去广告插件
说明 Chrome插件又称为谷歌浏览器插件,是谷歌Chrome浏览器的扩展插件,使用Chrome插件可以为Chrome浏览器带来一些功能性的扩展,进而提高Chrome的使用体验。这次我们先来简单接触一下,了解一点入门知识,先做一个简单的demo,就先去除一下CSDN网页上的广告。 解释这次做的这个插件真的很简单,不涉及什么加密解密,也不是去拦截特定的网络请求,就是用原创 2017-10-10 08:53:55 · 68662 阅读 · 1 评论 -
简单说 一道JS闭包面试题
说明最近看到这样一段代码 function fun(n,o){ console.log(o); return { fun:function(m){ return fun(m,n); } }; } var a = fun(0);a.fun(1);a.fun(2);a.fun(3); var b = f原创 2017-07-02 14:50:49 · 36344 阅读 · 6 评论 -
简单说 background-color 与 backgroundColor的区别
说明我们先来看看出了什么问题。 var a = document.querySelector('body'); var原创 2017-09-10 15:14:10 · 26245 阅读 · 1 评论 -
获取页面中被选中元素的 JS原生方法 与 jQuery方法 分析
说明测试用的浏览器是chrome,jquery的版本用了1.11.3和3.2.0js 原生方法方法一:document.getElementById(elementID)["checked"]; //返回true 或者 false方法二:document.getElementById(elementID).checked; //返回true 或者 false方法三:(有缺陷)d原创 2017-03-31 10:04:22 · 38371 阅读 · 1 评论 -
简单说 正则表达式——要注意lastIndex属性
说明这篇文章,主要和大家聊聊JavaScript中RegExp对象的属性。 解释每个RegExp对象都包含5个属性,source、global、ignoreCase、multiline、lastIndex。 source:是一个只读的字符串,包含正则表达式的文本。 var reg = /JavaScript/;var str = reg.source; //返回 JavaScriptglob原创 2017-07-07 21:03:49 · 18046 阅读 · 0 评论 -
JavaScript立即执行函数的解释分析(2)—函数表达式与函数声明的区别
说明上次我们聊了聊表达式与语句的区别,这次我们说说函数表达式与函数声明,上次虽然提到过这两点,但是并没有很详细的讲,这次要专门聊聊了!函数表达式(函数定义表达式)函数定义表达式定义一个JavaScript函数。表达式的值就是这个新定义的函数。 比如,像这样 var a=function (x){ console.log(x) } 函数声明说函数声明,就要提到上次我们说过的声明语句了,声明语句用原创 2017-06-12 17:45:28 · 24027 阅读 · 1 评论 -
JavaScript立即执行函数的解释分析(1)—表达式与语句的区别
说明我们应该经常看到这两种写法(function(){})()(function(){}())也许你知道,这是立即执行函数,但为什么这样能立即执行呢?也许是该好好聊聊了!但是,我们先来聊点其他的。 表达式表达式(expression),JavaScript解释器会将其计算出一个结果。程序中的常量是最简单的一类表达式。 原始表达式 最简单的表达式是“原始表达式”(primary expr原创 2017-06-07 13:06:18 · 1006 阅读 · 1 评论 -
JavaScript立即执行函数的解释分析(4)—总结篇
说明这次来对立即执行函数 Immediately-Invoked Function Expression (IIFE) ,做最后的总结,会把前面几篇提到的内容做一个整合,这样就把立即执行函数说完了。解释我们回到最初,看代码 (function (){ console.log(1);})();(function (){ console.log(2);}());这是两种比较常见的原创 2017-06-19 17:23:04 · 720 阅读 · 0 评论 -
简单说 eval 函数
说明我觉得eval( )函数是一个比较有趣的函数,虽然我平常基本用不到它。但我们还是来说说吧! eval( ) 函数可计算某个字符串,并执行其中的的 JavaScript 代码。 就是说,有一段字符串,把它放在eval()中就可以当 JavaScript代码执行了。解释var a=1;var b=2;eval(a+b); //返回 3很简单吧,我们继续说,eval( )经常会用到的地方就是解原创 2017-06-27 16:37:11 · 855 阅读 · 0 评论 -
JavaScript立即执行函数的解释分析(3)—谈谈圆括号()
说明前两篇文章,我们似乎已经明白为什么,立即执行函数要那样写了,这次为了能更加深入理解,我们来说说圆括号的事。解释1、分组运算符 在JavaScript中 圆括号 有提高优先级的作用,达到低优先级的表达式比高优先级的表达式更早运算。var a=1+2*3; //a的值为7var b=(1+2)*3; //a的值为92、传递参数 在声明函数或者调用函数的时候,如果有参数,需要放在圆括号中原创 2017-06-19 15:26:09 · 1414 阅读 · 0 评论 -
JavaScript中的运算符
说明JavaScript中的运算符,大多数是由标点符号表示的,比如“+”和“=”。而另外一些运算符则是由关键字表示的,比如delete和instanceof。关键字运算符合标点符号所表示的运算符一样都是正规的运算符。运算符分类算数运算符 +、 -、 *、 /、 %、++、 –关系运算符 >、 <、 >、=、 &amp原创 2017-05-01 20:12:14 · 845 阅读 · 0 评论 -
JavaScript初级玩法(4)—两数交换的多种方法
说明这里说的几种两数交换的方法,并不仅仅适用于JavaScript中,在其他语言中同样是适用的,重要的是思想,所以说,要以理解为目的,好在,这篇文章很好理解!!!方法1 (声明第三变量)代码var a=3;var b=4;var c;c=a;a=b;b=c;分析 交换两个数,我们最简单的办法就是,先找一个地方,把其中一个变量存起来,这样我们有三个变量,只要让他们转一圈,把各自的值,分别赋原创 2017-05-08 15:14:58 · 1282 阅读 · 0 评论 -
JavaScript初级玩法(3)—兔子问题(斐波那契数列)
问题有人想知道一年内一对兔子可繁殖成多少对,便筑了一道围墙把一对兔子关在里面。已知一对兔子每一个月可以生一对小兔子,但是一对兔子要从出生后第三个月才开始生小兔子假如一年内没有发生死亡,则一对兔子一年能繁殖成多少对?代码 function f(){ var n1 = 1; //第一个月兔子数量 var n2 = 1; //第二个月兔子数量原创 2017-04-17 21:52:27 · 2598 阅读 · 1 评论