在浏览器地址栏运行JS代码

在浏览器地址栏可以直接运行JavaScript代码，以javascript:开头后跟要 JS 代码语句。例如：

javascript:alert('Hello World!)');

将以上代码贴到浏览器地址栏回车后执行alert函数，显示一个弹窗。

不过，如果直接复制粘贴的话，Chrome浏览器会自动清除开头的javascript:，这就需要我们手动去输入了！

浏览器地址栏运行HTML代码

在非IE内核的浏览器地址栏可以直接运行HTML代码，比如：

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

浏览器可以直接当编辑器

将以下代码贴到浏览器地址栏运行后浏览器变成了一个简单的文本编辑器！

contenteditable是 HTML5 新加的属性，当指定了该属性后，元素就变成了可编辑状态了。

无独有偶，在控制台也可以通过 JS 语句指定元素可编辑：

document.body.contentEditable='true';

利用a标签自动解析URL

很多时候我们需要从一个URL中提取主机地址，查询参数等等，其实可以让浏览器很方便地帮我们完成这一任务。我们可以在JS代码里先创建一个a标签，然后把 url 赋给 href 属性：

var a = document.createElement('a');
 a.href = 'https://jianwoo.cn';
 console.log(a.host);

由此，我们可以写一个通用的工具方法：

function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^\?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^\/])/,'/$1'),
        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^\//,'').split('/')
    };}

页面拥有ID的元素会创建全局变量

在html页面中，所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量，所以我们获取元素不需要通过document.getElementById来获取了，可以直接调用对应的 id 来获取。

<div id="test">test1</div>
<script type="text/javascript">
        console.log(test);
</script>

加载CDN文件时可省掉HTTP标识

现在的网站为了节省服务器空间和加速资源文件的访问，通常会把资源(JS、CSS和图片文件等)放在 CDN 云上，有的CDN服务器使用HTTPS方式连接，而有的是传统的HTTP，其实我们在使用时可以忽略掉这个协议，将它从URL中省去。

<script src="//cdn.jianwoo.cn/layui-v2.6.8/layui/layui.js"></script>

script标签保存任意信息

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

<script type="text" id="template">
	<h1>测试，这将不会显示在页面上。</h1>
</script>
 

var template = document.getElementById('template').innerHTML

CSS篇

恶作剧

相信你看完以下代码后能够预料到会出现什么效果。

*{
    cursor: none!important;
}

文字模糊效果

以下两行简单的CSS3代码可达到将文字模糊化处理的目的，出来的效果有点像使用PS的滤镜。

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

居中样式

我们知道CSS中天然有水平居中的样式text-align:center，垂直居中很多都不生效，试试下面这个样式：

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

相比而言，水平居中要简单得多，像上面提到的text-align:center，经常用到的技巧还有margin:0 auto。同样，利用left和transform同样可实现水平居中。

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

多重边框

利用重复指定box-shadow来达到多个边框的效果

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

通过设置style标签的display:block样式可以让页面的style标签显示出来，并且加上contentEditable属性后可以让样式成为可编辑状态，更改后的样式效果也是实时更新呈现的。

<!DOCTYPE html>
<html>
    <body>
        <style  contentEditable style="display:block">
        	body { color: blue }
        </style>
    </body>
</html>

CSS中也可以做简单运算

通过CSS中的calc方法可以进行一些简单的运算，从而达到动态指定元素样式的目的。

.div{
	background-position: calc(100% - 20px) calc(100% - 10px);
}

JavaScript篇

生成随机字符串

利用Math.random和toString生成随机字符串。这里的技巧是利用了toString方法可以接收一个基数作为参数的原理，这个基数从2到36封顶。如果不指定，默认基数是10进制。

function generateRandomAlphaNum(len) {
    var rdmString = "";
    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
    return rdmString.substr(0, len);
}

整数的操作

JavaScript中是没有整型概念的，但利用好位操作符可以轻松处理，同时获得效率上的提升。

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

var foo = (12.4 / 4.13) | 0;//结果为3var bar = ~~(12.4 / 4.13);//结果为3
顺便说句，!!将一个值方便快速转化为布尔值 !!window===true 。

关于console的恶作剧

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

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

我们都知道交换两个变量值的常规做法，那就是声明一个中间变量来暂存。但鲜有人去挑战不声明中间变量的情况，下面的代码给出了这种实现。蛮有创意的。

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

if (window.location != window.parent.location) window.parent.location = window.location;

console.table

Chrome专属的打印方法，可以将JavaScript关联数组以表格形式输出到浏览器console，效果很惊赞，界面很美观。

var data = [{'用户名': '张三', '年龄':  24}, {'用户名': '李四', '年龄': 23}];
console.table(data);

一些浏览器和前端小技巧