前端冷知识
1.在浏览器地址栏可以直接运行JavaScript代码，做法是以 javascript: 开头后跟要执行的语句。比如：
javascript:alert('hello from address bar :)');
2.在地址栏输入以下代码然后回车运行，会出现指定的页面内容。
data:text/html,<h1>Hello, world!</h1>
3.可以把浏览器当编辑器，将以下代码贴到地址栏运行后浏览器变成了一个原始而简单的编辑器，与Windows自带的notepad一样。多亏了HTML5中新加的 contenteditable 属性
data:text/html, <html contenteditable>
4.将以下代码放到console执行后，整个页面将变得可编辑
document.body.contentEditable='true';
5.
*{
cursor: none!important;
}
6.以下两行简单的CSS3代码可达到将文字模糊化处理的目的，出来的效果有点像使用PS的滤镜，so cool!
p {
color: transparent;
text-shadow: #111 0 0 5px;
}
7.下面这个样式利用了translate来巧妙实现了垂直居中样式，需IE9+。
.center-vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}
8.通过设置style标签的 display:block 样式可以让页面的style标签显示出来，并且加上 contentEditable 属性后可以让样式成为可编辑状态，更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。这个做编辑器甚好！
<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body { color: blue }
</style>
</body>
</html>
9.通过设置父级窗口的 padding-bottom 可以达到让容器保持一定的长度比的目的，这在响应式页面设计中比较有用，能够保持元素不变形。
<div style="width: 100%; position: relative; padding-bottom: 20%;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
this content will have a constant aspect ratio that varies based on the width.
</div>
</div>
10.CSS中也可以做简单运算
通过CSS中的calc方法可以进行一些简单的运算，从而达到动态指定元素样式的目的。
.container{
background-position: calc(100% - 50px) calc(100% - 20px);
}
11.转成整数
|0 和 ~~ 是很好的一个例子，使用这两者可以将浮点转成整型且效率方面要比同类的 parseInt , Math.round 要快。在处理像素及动画位移等效果的时候会很有用。性能比较见此。
var foo = (12.4 / 4.13) | 0;//结果为3
var bar = ~~(12.4 / 4.13);//结果为3
12.!! 将一个值方便快速转化为布尔值 !!window===true13.关于重写原生方法，这里有个恶作剧大家可以拿去寻开心。Chrome的 console.log 是支持对文字添加样式的，甚至log图片都可以。于是可以重写掉默认的log方法，把将要log的文字应用到CSS的模糊效果，这样当有人试图调用console.log()的时候，出来的是模糊不清的文字
var _log = console.log;
console.log = function() {
_log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');
};
14.JavaScript中数字是不分浮点和整形的，所有数字其实均是浮点类型，只是把小数点省略了而以
比如你看到的1可以写成1.，这也就是为什么当你试图1.toString()时会报错，所以正确的写法应该是这样：1..toString()，或者如(1).toString()，这里括号的作用是纠正JS解析器，不要把1后面的点当成小数点。内部实现如上面所述，是将1.用包装对象转成对象再调用方法。
15.console表格输出，没啥说的
var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}];
console.table(data);
浙公网安备 33010602011771号