《ES6 标准入门》学习笔记(第五章:正则的扩展)

《ES6 标准入门》第五章,主要内容是介绍了ES6 对正则的一些增加语法。内容有点多,但把它拼成一个脑图后就清晰可见了。 注意 图中有用到 \n 的,\ 和 n 之间多了一个空格,本来是不能有的,但不加个空格就会把它解析了,所以还是无奈之举。 图中有些文字比较长,本来想图中只是写个大概,然后再用文字补上一些,但想想,还是能在图上写的,就尽量写在图上,因为这样来得更直观,更好记。可能会有些知识...

2017
11-23

《ES6 标准入门》学习笔记(第四章:字符串的扩展)

《ES6 标准入门》的第四章主要是介绍 ES6 加强对 Unicode 的支持,以及扩展了字符串对象。 Unicode 的表示字符的增加,以前对于超过\u0000~\uFFFF这个范围的,必须用2个双字节的形式表达,现在有了{}我们就可以像下面这样写: 以前 console.log("\uD842\uDFB7"); // console.log("\u20BB7"); // ₻7 但是现在我们就可以通过{}来显示所对应的码点(大于\uFFFF): 现在 console.log("\u{20BB7}"); //...

2017
11-21

《ES6 标准入门》学习笔记(第三章:变量的解构赋值)

《ES6 标准入门》的第三章主要讲的是变量的解构赋值,这里也没什么特别难的地方。只要足够细心,基本都能理解。 对于数组的结构赋值,等号左则的模式只匹配等号右边数据的一部分时,解构还可以成功的;如果等号左则的模式变量多于等号右则的数组长度时也依然可以解构成功,只不过按顺序依次赋值后,没有得到值的就为undefined。不妨看几个例子: 看这里 // 右则超值情况 let [a,b,c] = [1,2,3,4,5,6]; ...

2017
11-19

《ES6 标准入门》学习笔记(第二章:let 和 const 命令)

ES6 标准入门-第二章主要是讲了 let 和 const 以及 块级作用域。 let 和 const 命令 从上图可以看出,let 和 const 有很多相似之处,可以把它们看作是一对孪生兄弟。let 中【基本用法】的第一点,我们必需要知道用 let 声明的变量(比如:i) 会有两个不同的作用域,请看下面这个例子: let 与 var 的区别 // var 声明 for(var i=0;i<5;i++){ // 这个 i 为父级作用域 var i = 5; console...

2017
11-19

JavaScript 视频文字弹幕效果

前言 视频弹幕效果到处都是,这种交互大大地改变了网友之间的交流方式 ,让你看视频的时候,可以发评论,可以看到别人的评论,真是一石三鸟。用户体验没得说,所以本文就是将要分享这个效果。上码! 各种套路 套路一 简单的 CSS 样式如下 : 样式看这里 *{ padding: 0; margin: 0; } html,body{ width: 100%; height: 100%; overflow: hidden; } .stage{ posit...

2017
11-14

JavaScript 实现长按功能(满满的套路)

前言 在某种特定场景下,有时候我们需要用到长按功能,比如长按弹出操作界面,不过,在 PC 端的话就用得比较少,本文主要是针对移动端操作的,毕竟移动端手势操作是必不可少。 在开始之前我们先来看看基本的 HTML 代码: 简单得….. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 实现长按效果 - 云库前端</ti...

2017
11-14

input 输入框在项目开发中的各种需求实现

前言 在前端开发中,当我们遇到 input 输入框的时候,需求总是会提出各种要求,让你做出来的东西更可靠,更人性化。所以在这里我们有必要把 input 输入框的一些常用的实现整理出来。 input 之旅 在这里我们尽可能的把所有涉及到的需要的实现方法都为大家整理出来,如果你觉得有些还没列出,那么可以留言,我会作进一步的完善。 首先把基础的 HTML 代码贴出来: DEMO HTML 代码 <!DOCTYPE html> ...

2017
11-13

JavaScript 实现浏览器全屏模式及退出全屏模式

这是一个不怎么常用的 JavaScript 交互效果,一旦用到了,你就知道书到用时方恨少的痛苦了。所以还是有备无患,自己先过一篇即使有个印象也未常不是一件好事。 HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 实现浏览器全屏及退出全屏 - 云库前端</title> <meta name="viewport" content="width...

2017
11-12

JavaScript 获取 Select 下拉框的值

为什么这么简单的一个东西,我还得单独一篇文章记录下来?其实理由很简单,就是时刻提醒像我这种眼高手低的,基础知识不牢固的人,基础就是一切,基础可以创造一切。在做《Canvas 实现炫丽的粒子运动效果(粒子生成文字)》这个效果时,需要用到下拉框,来动态改变粒子运动效果。但尴尬的是,下拉框写好了却不知道怎么获取选中的值,于是网上找了下,并记录成文。 写好的HTML代码: HTML 代码 <!DOCTYP...

2017
11-12

Canvas 实现炫丽的粒子运动效果(粒子生成文字)

没有最好,只有更好,如题所示,这篇文章只要是分享一个用 Canvas 来实现的粒子运动效果。感觉有点标题党了,但换个角度,勉勉强强算是炫丽吧,虽然色彩上与炫丽无关,但运动效果上还是算得上有点点炫的。不管怎么样,我们还是开始这个所谓的炫丽效果吧! 直接上代码 ,不懂可以看代码注释。估计就会看明白大概的思路了。 HTML代码 (html+css+js) <!DOCTYPE html> <html lang="en"> <h...

2017
11-12