前端简单说
关注
分享
扫一扫
文章平均质量分 91
我们的宗旨只有一个，就是用最简单的话，讲前端最难理解的问题！！！
FEWY
这个作者很懒，什么都没留下…
展开
-
JavaScript中对光标和选区的操作
在一些业务场景，比如高亮文本、输入编辑、等场景中需要对光标和选区进行操作时，可以使用浏览器提供的 Selection 对象和 Range 对象来操作光标和选区。Selection 对象Selection 对象表示用户选择的选区或插入符号的当前位置，它可能横跨多个元素。//获取 Selection 对象window.getSelection();用户可能从左到右（与文档方向相同）选择文本或从右到左（与文档方向相反）选择文本。anchor （锚点）： 指向用户开始选择的地方。focus （焦点原创 2021-06-18 16:12:56 · 2469 阅读 · 0 评论 -
跨站请求伪造—CSRF
CSRF 介绍CSRF，是跨站请求伪造（Cross Site Request Forgery）的缩写，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。通常情况下，CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。CSRF 攻击示例这里有一个网站，用户可以看...原创 2019-11-26 10:56:47 · 935 阅读 · 1 评论 -
关于 ES6 中 Promise 的面试题
说明题目一原创 2018-10-29 13:12:45 · 2393 阅读 · 1 评论 -
用 canvas 的 getImageData 做点有趣的事
说明 canvas元素标签强大之处在于可以直接在HTML上进行图形操作，具有极大的应用价值。canvas 可以实现对图像的像素操作，这就要说到 getImgData 方法了。解释CanvasRenderingContext2D.getImageData() 返回一个 ImageData 对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy...原创 2018-09-19 09:38:26 · 8095 阅读 · 1 评论 -
学习 canvas 的 globalCompositeOperation 做出的神奇效果
说明最早知道 context 的 globalCompositeOperation 属性，是在实现一个刮刮卡效果的时候，这次又学习一次，希望能加深理解吧。先来看下 context 的 globalCompositeOperation 属性，具体是干什么的吧。...原创 2018-08-30 13:41:08 · 4484 阅读 · 2 评论 -
小程序—九宫格心形拼图
说明前几天在朋友圈看到好几次这种图片。 这种图片，是用九张图片拼成的一个心形。 感觉很有趣，就上网查了查怎么做，大部分的说法就是用美图秀秀的拼图功能来做， 在微信小程序中也有专门做心形拼图的小程序，我都试了试之后，感觉还可以更加简单一些，于是我就自己做了个小程序。实现小程序的思路1、有两个 canvas，一个小的 canvas 显示最后会是什么样子，一个大的 canv...原创 2018-07-31 15:10:06 · 7203 阅读 · 1 评论 -
JavaScript中的函数重载（Function overloading）
说明JavaScript 中没有真正意义上的函数重载。函数重载 函数名相同，函数的参数列表不同(包括参数个数和参数类型)，根据参数的不同去执行不同的操作。 我们举个例子看看function overload(a){ console.log('一个参数')}function overload(a,b){ console.log('两个参数')}// 在...原创 2018-07-10 15:46:04 · 4256 阅读 · 1 评论 -
一个浪漫又悲情的爱情故事——笛卡尔心形线
说明写这篇文章是某天看到这样一个公式 r=a(1-cosθ) ，我上网搜了下，原来是笛卡尔心形线的极坐标方程，这个方程里的确有一个浪漫又悲情的爱情故事，感兴趣的朋友可以点这里看看，而至于这个故事是真是假，这 并不重要。而这篇文章的目的是要用前端的方式，画出笛卡尔心形线。 本来我想，这么经典的公式，网上应该已经有人实现过了的吧。 我搜了搜，不得不佩服网友们，有 Java 实现的，有 C#...原创 2018-06-06 10:52:50 · 77319 阅读 · 10 评论 -
JavaScript实现爆炸碎片的 图片切换 效果
说明和大家分享一个看上去很酷的效果，先来看效果图吧！ 解释实现这个效果的思路就是，一个大的div元素，设置好一个背景，生成一定数量小的div元素，背景设置成同样的图片，但是每个小div元素的 background-position 属性值不同，整齐的覆盖在大的div元素上，这样就能拼成一张完整的背景图，鼠标移入时，让所有小的div元素移动和变形。 总的来说就是两步： 1...原创 2018-05-09 10:58:37 · 5421 阅读 · 1 评论 -
canvas实现漂亮的下雨效果
说明这篇文章说如何用canvas画出漂亮的下雨效果，先看看最后实现的效果吧。 效果图 解释看图来分析下，我们需要实现哪些效果。 1、雨滴下落效果，移动鼠标控制下落方向 2、雨滴下落散成小水珠，小水珠的移动方向和鼠标移动方向相同 3、雨滴下落到鼠标坐标一定范围内，散成小水珠，同样的，小水珠的移动方向也和鼠标移动方向相同好的，我们把整个效果大致拆分成三个效果，实现这三个...原创 2018-04-15 12:03:44 · 8075 阅读 · 21 评论 -
JavaScript实现冒泡排序 可视化
说明上次写了 JavaScript实现冒泡排序 ，只是简单的说了冒泡排序算法是什么，怎么实现，这次来实现将冒泡排序的过程展现出来。解释先来个简单的版本，看效果图 实现这个效果，思路是这样的 1、先将需要排序的数组，进行冒泡排序，记录每一步的内容，存放在一个数组中 2、利用canvas，实现一个 darw 方法，能将一步的内容画到页面上 3、实现动画效果，利用定时器，每...原创 2018-04-02 10:05:28 · 4146 阅读 · 3 评论 -
JavaScript实现冒泡排序
说明对数组进行 冒泡排序 算是比较简单的，冒泡排序也是容易理解的一种排序算法了，在面试的时候，很可能就会问到。实现原理 比较每相邻两个数，如果前者大于后者，就把两个数交换位置；这样一来，第一轮就可以选出一个最大的数放在最后面；那么经过 n-1（数组的 length - 1） 轮，就完成了所有数的排序。好的，我们先来实现找数组中的最大数，并把他放到数组最后。va...原创 2018-03-18 16:44:00 · 37078 阅读 · 4 评论 -
JavaScript实现 满天星 导航栏
说明分享一个满天星导航栏的效果，代码不多，但效果挺好看，先看看效果图吧。 解释实现这个效果，需要掌握的知识不用很多，知道简单的CSS，会用JS 获取元素， 能绑定事件基本就足够了。 好的，我们直接来看代码，注释已经写的很详细了，不想看有注释的，点这里。原创 2018-03-05 16:49:23 · 1643 阅读 · 1 评论 -
简单说 chrome浏览器 必知必会的小技巧
说明这篇文章主要介绍的就是一些chrome浏览器的小技巧，很简单，希望对大家有所帮助。 这其中的一些小技巧在低版本中是没有的，所以建议大家用最新版的，目前最新版是62，版本很重要，如果发现有些技巧不起作用，请先查看浏览器的版本。 快捷键快捷键比较多，这里挑出几个常用的说一下 最后会给出一张比较完整的快捷键的表 下列快捷键可以在所有 开发者工具 面板中可以使用 全局快捷键 w原创 2017-11-24 12:00:08 · 35201 阅读 · 1 评论 -
简单说 JavaScript实现雪花飘落效果
说明这次实现的雪花飘落的效果很简单，主要是为了练习练习JavaScript中的定时器，setTimeout 和 setInterval。 效果图解释setTimeout() setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。 var timerId = setTimeout(func|code, delay原创 2017-11-30 12:08:46 · 5716 阅读 · 1 评论 -
简单说 JavaScript中的事件委托（上）
说明这篇文章说JavaScript中的事件委托，这次先说一些比较基本的知识。 事件委托 是什么先来看看事件委托的概念 事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。事件委托，你叫他 事件代理 也可以，都是一个意思。 事件：JavaScript 侦测到的行为就是事件，比如鼠标点击、某个键盘的键被按下、元素获得焦点。 委托：就是把原来自己做的事，交给别人做原创 2017-12-17 15:36:54 · 569 阅读 · 0 评论 -
谈谈 JavaScript 中的 声明提前（hoisting）
有许多同学知道js在执行的时候，是从上到下，从左到右，一行一行执行的，但是不知道在这之前还要做一些事情，js程序在正式执行之前，会将所有var 声明的变量和function声明的函数，预读到所在作用域的顶部，但是对变量的赋值仍然保留在原位置，而且先预声明变量再预定义函数。这个过程也被叫做，“预解析”或者“预编译”举例：console.log(a); //不会出错，会输出undefinedvar原创 2017-04-01 13:16:39 · 94081 阅读 · 0 评论 -
简单说 JavaScript中的事件委托（下）
说明上次我们说了一些，关于 JavaScript中事件委托的 基础知识，这次我们继续来看。 解释先来一段代码<!doctype html><html lang="en"> </head> <body> <ul id=ul&gt原创 2017-12-22 10:33:58 · 551 阅读 · 0 评论 -
jQuery中的isPlainObject()方法 实现原理
说明jQuery中的isPlainObject() 函数用于判断指定参数是否是一个纯粹的对象，返回值为Boolean类型。“纯粹的对象”，就是通过 { }、new Object()、Object.create(null) 创建的对象。 这个方法的作用是为了跟其他的 JavaScript对象如 null，数组，宿主对象（documents），DOM 等作区分，因为这些用 typeof ...原创 2018-02-25 09:48:29 · 1143 阅读 · 0 评论 -
简单说 JavaScript的箭头函数
说明箭头函数本质还是函数，我们来看看他与JavaScript中普通函数的区别，先看看写法上的区别。 解释写箭头函数，我们记住一个顺序就好，参数、箭头、函数体、这个顺序记住就足够了，参数、箭头、函数体、这三个是必须的，函数名可以没有，但这三项必须有，一些简写的方式也是简写这三项里的东西。 简写1、只有一个参数时，() 可省略 //不简写va...原创 2017-11-12 21:27:28 · 3058 阅读 · 12 评论 -
简单说 通过CSS实现 文字渐变色 的两种方式
说明这次的重点就在于两个属性， background 属性 mask 属性 这两个属性分别是两种实现方式的关键。 解释方式一效果图 代码 <!DOCTYPE html><html><head> <meta charset="utf-8"> <style> span { background: linear-gradient原创 2017-11-05 17:48:09 · 72324 阅读 · 6 评论 -
简单说 CSS滤镜 filter属性
说明滤镜主要是用来实现图像的各种特殊效果，css的滤镜是很神奇的。解释css的滤镜，也就是filter属性，主要有下面这几个属性值 blur（模糊） brightness（亮度） 注意：值是100%，图像无变化。超过100%，变亮，小于100%，变暗。 contrast（对比度） 与brightness 一样 contrast 100%，图片无变化。 drop-shad原创 2017-10-22 09:45:07 · 69621 阅读 · 0 评论 -
简单说 通过CSS的滤镜 实现 火焰效果
说明上次我们了解了一些css滤镜的基础知识， 简单说 CSS滤镜 filter属性 这次我们就来用css的滤镜实现一个 火焰的效果。 解释 要实现上面的火焰效果，我们先来了解一些必要的东西。 上次我们说过两个滤镜，blur 和 contrast。 blur 是给图像设置高斯模糊， contrast 是调整图像的对比度， 他们一起使用会产生融合的效果。 效果图 图中 红色原创 2017-10-27 14:51:04 · 68265 阅读 · 1 评论 -
简单说 CSS中的 object-fit 与 object-position
说明问题： 一个div宽度不固定，高度固定，采用Flex布局，它里面有两个元素一个img宽度占40%，高度占100%，一个p元素，宽度占60%，高度占100%，调整浏览器窗口大小，要保证，img元素不变形，宽高比不变，怎么办！ 从图中可以看出，随着调整浏览器窗口，图片的宽高比也被破坏了，我们该怎么办呢？我想大家应该会想到用 background，用一个div的background来替代im原创 2017-10-16 14:04:08 · 66669 阅读 · 1 评论 -
简单说 如何做一个chrome 去广告插件
说明 Chrome插件又称为谷歌浏览器插件,是谷歌Chrome浏览器的扩展插件,使用Chrome插件可以为Chrome浏览器带来一些功能性的扩展,进而提高Chrome的使用体验。这次我们先来简单接触一下，了解一点入门知识，先做一个简单的demo，就先去除一下优快云网页上的广告。 解释这次做的这个插件真的很简单，不涉及什么加密解密，也不是去拦截特定的网络请求，就是用原创 2017-10-10 08:53:55 · 68993 阅读 · 1 评论 -
JavaScript数组去重—ES6的两种方式
说明JavaScript数组去重这个问题，经常出现在面试题中，以前也写过一篇数组去重的文章，（JavaScript 数组去重的多种方法原理详解）但感觉代码还是有点不够简单，今天和大家再说两种方法，代码可是足够的少了。 解释方法一：function unique(arr) { const res = new Map(); return arr.filter((a) =&gt; !res(原创 2017-09-27 10:31:54 · 30288 阅读 · 1 评论 -
简单说 通过JS控制CSS的各种方式（下）
说明上次我们说了8种通过JS控制CSS的方式，但这么多方式，应该用哪一种哪？哪一种又更适合我们呢？今天我们来说说这个。 解释我们用过的各种类库或者框架中，经常会使用到JS控制CSS的函数，比如JQuery中的css() 方法。 想明白JQuery中的css() 方法的实现原理，看这里 http://www.111cn.net/wy/jquery/97254.htm 今天我们也简单的实现一原创 2017-09-06 17:35:38 · 623 阅读 · 0 评论 -
简单说 通过JS控制CSS的各种方式（上）
说明通过JS控制CSS，我们能做出更多漂亮的页面特效，做出更炫的交互效果。今天我们来说说JS控制CSS的各种方式。 解释JavaScript、CSS、HTML是前端三剑客，我们说正事之前，先来说说CSS与HTML的事。 在HTML中使用CSS有三种方式 1、内联方式 CSS定义在单个的HTML元素中的style属性中 2、内部样式表 CSS通过标签原创 2017-09-13 11:54:55 · 47514 阅读 · 1 评论 -
简单说 background-color 与 backgroundColor的区别
说明我们先来看看出了什么问题。 var a = document.querySelector('body'); var原创 2017-09-10 15:14:10 · 26437 阅读 · 1 评论 -
简单说 通过JS的隐式转换，关键时刻救你一命
说明JavaScript是非常灵活的，比如在比较的时候，会进行隐式转换，这很有趣，你如果对隐式转换不是特别熟悉，结果往往出乎你的意料，但这也正是它有趣的地方。 我们来看看这行代码 (![]+[])[+!![]- -+!![]- -+!![]]+({}+[])[+!![]]+(![]+[])[+!![]- -+!![]- -+!![]]这行代码的结果可能出乎你的意料，看结果 结果居然是sos原创 2017-08-18 15:17:21 · 32559 阅读 · 10 评论 -
简单说 !![]==true 与 []==true 引发的思考
说明直接说出问题 !![] == true //结果是true [] == true //结果是false ![] == [] //结果是true为什么会出现这种情况 解释首先说一下,如果你看到这些代码，能想到 相等运算符（== ），两个操作数类型不同时，进行的转换,那么你已经接近答案了。 不要浪费时间，我们需要先知道在JavaScript中...原创 2017-08-18 14:54:10 · 15426 阅读 · 1 评论 -
简单说 JavaScript中的tostring( ) 与 valueOf( )方法
说明所有的对象都继承有toString() 和 valueOf() 方法，对象到字符串，对象到数字的转换，会通过调用待转换对象的这两个方法中的一个来完成。 解释toString( )方法的作用是：返回一个反映这个对象的字符串，而很多类都定义了不同版本的toString( )。 对象 操作 默认 返回 “[object class]”，其中 class是对象类型的名称。其中class是原创 2017-08-18 14:45:11 · 68433 阅读 · 1 评论 -
简单说 CSS的vertical-align
说明vertical-align属性，是CSS属性中一个比较重要的属性，也是比较不好理解的一个。 我们今天就来说说它。 解释先来看看他的定义。 定义和用法 vertical-align 属性设置元素的垂直对齐方式。 说明 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在...原创 2017-08-02 20:43:39 · 21140 阅读 · 3 评论 -
简单说 用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的，这次我们来一起用CSS实现一个魔方旋转的特效，先来看看效果图！ 解释我们要做这样的效果，重点在于怎么把6张图片，摆放成魔方的样子，而把它们摆放成魔方的样子，重点在于用好CSS的transform，这是非常重要的，好的，我们先拼出一个魔方的样子。 效果图 代码（代码比较长，朋友们可以直接粘贴复制到电脑看效果）&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;原创 2017-07-15 04:47:41 · 38427 阅读 · 16 评论 -
简单说 正则表达式——要注意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 · 18115 阅读 · 0 评论 -
简单说 一道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 · 36560 阅读 · 6 评论 -
简单说 CSS中的mask—好好利用mask-image
说明CSS中的mask属性允许用户屏蔽或剪裁特定点的图像来实现，部分或完全隐藏某个元素的可见性。 好吧，这个概念可能有点不好理解，先看图。 看了这个等式，似乎明白点什么了吧，朋友们，第一张图就是一张普通的图，第二张图，黑色部分是不透明的，白色部分是透明的，用上mask之后，两张图重叠，黑色区域中的会显示出来，白色区域不显示。 用过ps的朋友，应该很清楚，蒙版这东西，这就和蒙版很像，好吧原创 2017-07-01 23:46:46 · 21343 阅读 · 4 评论 -
简单说 eval 函数
说明我觉得eval( )函数是一个比较有趣的函数，虽然我平常基本用不到它。但我们还是来说说吧！ eval( ) 函数可计算某个字符串，并执行其中的的 JavaScript 代码。 就是说，有一段字符串，把它放在eval（）中就可以当 JavaScript代码执行了。解释var a=1;var b=2;eval(a+b); //返回 3很简单吧，我们继续说，eval( )经常会用到的地方就是解原创 2017-06-27 16:37:11 · 893 阅读 · 0 评论 -
获取页面中被选中元素的 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 · 38520 阅读 · 1 评论 -
:before 和 :after的多用途实践 — 特效篇（3）
说明按钮动画特效总结原创 2017-05-26 12:36:35 · 820 阅读 · 1 评论