移动设备touch事件

软件开源协议

前端开发环境搭建

  • 仅包含保存自动刷新功能

前端的冷知识

浏览器文本编辑器

    <!--地址栏输入-->
    data:text/html, <html contenteditable>

直接编辑网页

    <!--console输入-->
    document.body.contentEditable = 'true';

利用a标签自动解析URL

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

简单的文字模糊效果

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

垂直居中

    .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

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

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

下面的代码通过重写浏览器的alert让它可以记录弹窗的次数。

    (function() {
        var oldAlert = window.alert, count = 0;
        window.alert = function(a) {
            count++;
            oldAlert(a + "\n You've called alert " + count + " times now. Stop, it's evil!");
        };
    })();
作者：bigfact