第 10 页|IT-北北报

前端小技巧

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%);
}

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;



无觅相关文章插件,快速提升流量