前端小技巧
2015/01
29
18:01
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%);
}
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
4.CSS中也可以做简单运算
通过CSS中的calc方法可以进行一些简单的运算，从而达到动态指定元素样式的目的,但是请考虑性能问题。
.container
{
background-position: calc(100% – 50px) calc(100% – 20px);
}
{
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;]
var bar = ~~(12.4 / 4.13); //结果为3 ~取反运算符 [规则：~1=0; ~0=1;]
另外，!!将一个值方便快速转化为布尔值 !!window===true
^为异或运算符，两个相应位为“异”（值不同），则该位结果为1，否则为0；运算规则：0^0=0；
