requestAnimationFrame动画

页面动画效果通常是使用CSS3的animation,transition,或者在JavaScript中使用setTimeout | setInterval来持续改变某个CSS属性的值来实现。window还有一个API,用来实现高性能的帧动画,那就是requestAnimationFrame。

requestAnimationFrame语法

window.requestAnimationFram......

chrome调试js小记

添加断点

sources中点击行号槽,对相应行添加断点(蓝色标识);

移除的话再点一下就可以了。

断点相关操作

① 点击去往下一个断点

② 执行下一条语句

③ 点击进入函数内部

④ 点击跳出函数

⑤ 到下一步执行的语句

⑥ 取消所有断点

当程序中断在断点处时,长按第一个按钮出现,在 0.5s 内忽略任何中断

面板介绍

Watch

变量观察

Call Stac......

日历

改bug的时候偶然看到了一段展示日历的js,平时不怎么写这个,记一下...

Date对象

构造函数

new Date();

new Date(value);

new Date(dateString);

new Date(year, month[, day[,hour[,minutes[,seconds[,milliseconds]]]]]);

month从0开始

day从1......

十个极好的ES6特性

原文:

作者:

尽管ES6规范不是什么新鲜的东西了,但是我想很多开发者仍然对它不是很熟悉。主要原因可能是浏览器对它的支持晚于规范的发布。现在,规范已经发布两年了,很多现代浏览器都能很好的支持ES6。即使你(或者你的客户)不使用最新版本的浏览器,你也可以使用编译器(比如Babel)在应用的构建过程中把ES6转换成ES5。也就是说,现在是时候迈开步子,学习ES6了。

在这篇文......

67个帮网页开发者节省时间的工具、库和资源

原文:

在本文中,我并不会谈论一些大型的前端框架,比如像React、Angular、Vue等,也不准备讲流行的代码编辑器如Atom,VS Code,Sublime等,我只是想分享一个我认为对提升开发者工作效率有帮助的工具列表。

一些朋友可能对其中的一些工具有所了解,但是如果你从中发现新的和有用的东西,我会感到很高兴。

这个列表包含很多不同的资源,所以为了方便......

HTML5表单验证

css伪类

:optional

没有required属性的input或textarea元素

:required

拥有required属性的input或textarea元素

:invalid

未通过输入类型验证的input或textarea元素

:valid

通过输入类型验证的input或textarea元素

input {

height: 35px;

padd......

babel编译es7

报错

Decorators are not supported yet in 6.x pending proposal update.

安装

npm i --save-dev babel-plugin-transform-decorators-legacy

npm install --save-dev babel-preset-stage-0

gulp或者webpack中加......

使用ES6进行开发的思考(转)

ECMAScript6已经于近日进入了RC阶段,而早在其处于社区讨论时,我就开始一直在尝试使用ES6进行开发的方案。在推出后,基于ES6的开发也有了具体可执行的解决方案,无论是Build还是Debug都能得到很好的支持。

而在有了充足的环境、工具之后,我们面临的是对ES6众多新特性的选择和分析,以便选取一个最佳的子集,让我们可以享受ES6带来的便利(减少代码量、提高可读性等)的同时,也可以......