一、浏览器技巧

1. 浏览器地址栏运行JavaScript代码

使用标签打开一个tab，执行javascript代码，例子：点击我

javascript:alert('我是从浏览器地址栏上执行的 :)');

2. 浏览器地址栏运行HTML代码

使用标签打开一个tab，运行HTML代码，例子(该方式已经被chrome禁用)：点击我

data:text/html,<h1>Hello, world!</h1>

3. 浏览器当编辑器

使用标签打开一个tab，运行HTML代码，例子(该方式已经被chrome禁用)：点击我

data:text/html, <html contenteditable>

4. 整个页面可编辑

点击可以编辑该页面，点击禁止编辑页面

document.body.contentEditable='true';

5. 利用a标签自动解析URL

            var a = document.createElement('a');
            a.href = '/shared/img/404.png';
            console.log(a.host);

扩展成js库

6. 加载CDN文件时，可以省掉HTTP标识

<script src="//domain.com/path/to/script.js"></script>

7. 利用script标签保存任意信息

将script标签设置为type='text'然后可以在里面保存任意信息，之后可以在JavaScript代码中很方便地获取。

二、css技巧

1. 恶作剧：去掉鼠标指针

*{cursor: none!important;}

2. 文字模糊效果

            p {
            color: transparent;
            text-shadow: #111 0 0 5px;
            }

3. 垂直居中

当然你可以将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现，但此种实现往往会因为display：table而破坏整体布局，那还不如直接用table标签了呢。

            .center-vertical {
                position: relative;
                top: 50%;
                transform: translateY(-50%);
            }

相比而言，水平居中要简单得多，像上面提到的text-align:center，经常用到的技巧还有margin:0 auto。但对于margin大法也只在子元素宽度小于容器宽度时管用，当子元素宽度大于容器宽度时此法失效。

            .center-horizontal {
                position: relative;
                left: 50%;
                transform: translateX(-50%);
            }

4. 多重边框

            /*CSS Border with Box-Shadow Example*/
            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
            }

5. CSS中也可以做简单运算

            .container{
                background-position: calc(100% - 50px) calc(100% - 20px);
            }

三、javascript

1. 生成随机字符串

2. 整数的操作

|0和~~是很好的一个例子，使用这两者可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快。在处理像素及动画位移等效果的时候会很有用

3. 重写原生浏览器方法以实现新功能

装饰器实现,下载的代码通过重写浏览器的alert让它可以记录弹窗的次数。

4. 恶作剧：console模糊化

Chrome的console.log是支持对文字添加样式的，甚至log图片都可以。于是可以重写掉默认的log方法，把将要log的文字应用到CSS的模糊效果，这样当有人试图调用console.log()的时候，出来的是模糊不清的文字。好冷，我表示没有笑。

5. 不声明第三个变量的值交换

var a=1,b=2;a=[b,b=a][0];

6. 禁止别人以iframe加载你的页面

            if (window!=top) // 判断当前的window对象是否是top对象

            top.location.href =window.location.href; // 如果不是，将top对象的网址自动导向被嵌入网页的网址

一、 浏览器技巧