1.在非IE内核的浏览器的地址栏中可以,直接运行HTML代码
例如在地址栏输入以下代码然后回车运行,会出现下图的页面内容。
data:text/html,<h1>Hello, world!</h1>
2.把整个页面改成可以编辑
将以下代码放到console执行后
document.body.contentEditable=’true’;
3.垂直居中
下面这个样式利用了translate来巧妙实现了垂直居中样式,需IE9+。
.center-vertical
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
4.CSS中也可以做简单运算
通过CSS中的calc方法可以进行一些简单的运算,从而达到动态指定元素样式的目的,但是请考虑性能问题。
.container
{
background-position: calc(100% – 50px) calc(100% – 20px);
}
5.整数的操作
JS中是没有整型概念的,但利用好位操作符可以轻松处理,同时获得效率上的提升。
|0和~~是很好的一个例子,使用这两者可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快。在处理像素及动画位移等效果的时候会很有用。性能比较见此。
var foo = (12.4 / 4.13) | 0; //结果为3
var bar = ~~(12.4 / 4.13); //结果为3 ~取反运算符 [规则:~1=0; ~0=1;]
另外,!!将一个值方便快速转化为布尔值 !!window===true
^为异或运算符,两个相应位为“异”(值不同),则该位结果为1,否则为0;运算规则:0^0=0; 0^1=1; 1^0=1; 1^1=0;