一、浏览器地址栏运行JavaScript代码
如果是通过copy paste代码到浏览器地址栏的话,IE及Chrome会自动去掉代码开头的javascript:,所以需要手动添加起来才能正确执行,而Firefox中虽然不会自动去掉,但它根本就不支持在地址栏运行JS代码。
例如:javascript:alert('hello from address bar :)');
二、浏览器地址栏运行HTML代码
地址栏输入:data:text/html,<h1>Hello, world!</h1>
三、把浏览器当编辑器
地址栏输入:data:text/html, <html contenteditable>
四、在浏览器修改页面内容
console执行:document.body.contentEditable='true';
五、加载CDN文件时,可以省掉HTTP标识
<script src="//domain.com/path/to/script.js"></script>
六、利用script标签保存任意信息
<script type="text" id="template">
<h1>This won't display</h1>
</script>
var text = document.getElementById('template').innerHTML
七、文字模糊处理
p { color: transparent; text-shadow: #111 0 0 5px; }
八、垂直居中
将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle
.center-vertical { position: relative; top: 50%; transform: translateY(-50%); }
九、多重边框
div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2); height: 200px; margin: 50px auto; width: 400px }
十、CSS中简单运算
.container{ background-position: calc(100% - 50px) calc(100% - 20px); }
十一、整数的操作
var foo = (12.4 / 4.13) | 0;//结果为3
var bar = ~~(12.4 / 4.13);//结果为3
十二、不声明第三个变量的值交换
var a=1,b=2;a=[b,b=a][0];
console.log(a)//2
console.log(b)//3
十三、禁止别人以iframe加载你的页面
if (window.location != window.parent.location) window.parent.location = window.location;