《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 标准入门》学习笔记(第二章: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

JavaScript 中的 this 关键字

前言 关于 JavaScript 中的 this 关键字相信你已经早已感受到它的存在了,或者对他也已经有一知半解了,但本文要分享的关于 this 的东西你确定全都知道吗?可能不一定! this 之旅 this 总是指向一个对象,这一点已经家喻户晓了,包括你也不例外。但在不同的情况下它的指向也是不一样的,得具体情况具体分析。我们通过几个例子来感受感受 this 的博大精深。 场景一 直接打印 console.log(this); //...

2017
10-26

JavaScript 关于元素滚动的多种场景

在这里文章虽然说是多种场景,其实说白也就是元素的内容滚动,只是对象不一样罢了(如:body 或者 div)。怎么实现元素滚动到其内容的指定位置?实现元素滚动到底部有什么应用场景?等这些问题一个个从脑中浮现。现在让我们来看看怎么实现。 首先我们最常用见或者最常用的就是浏览器默认的滚动元素 body,比如滚动到页面指定的位置,或者滚动到页面的底部,这太常见了。但是在本文中我们不用 body 来作为例...

2017
10-19