在百度首页启动浏览器开发者工具时，发现网页中使用 console.log() 输出了一段招聘信息，不得不说这种发布方式很有创意而且更有针对性。

该代码中使用了颜色样式，但这种样式在 IE 和 Edge 中是无效的，会将所有参数当做普通字符一并输出。

本文就介绍 console.log() 输出带颜色格式的写法，附带判断浏览器类型。

/*检测浏览器类型*/
function uaMatch() {
    var userAgent = navigator.userAgent,
            rEdge = /(edge)\/([\w.]+)/,
            rMsie = /(msie\s|trident.*rv:)([\w.]+)/,
            rFirefox = /(firefox)\/([\w.]+)/,
            rOpera = /(opera).+version\/([\w.]+)/,
            rChrome = /(chrome)\/([\w.]+)/,
            rSafari = /version\/([\w.]+).*(safari)/;
    var ua = userAgent.toLowerCase();

    var match = rEdge.exec(ua);
    if (match != null) {
        return { browser: "EDGE", version: match[2] || "0" };
    }
    var match = rMsie.exec(ua);
    if (match != null) {
        return { browser: "IE", version: match[2] || "0" };
    }
    var match = rFirefox.exec(ua);
    if (match != null) {
        return { browser: match[1] || "", version: match[2] || "0" };
    }
    var match = rOpera.exec(ua);
    if (match != null) {
        return { browser: match[1] || "", version: match[2] || "0" };
    }
    var match = rChrome.exec(ua);
    if (match != null) {
        return { browser: match[1] || "", version: match[2] || "0" };
    }
    var match = rSafari.exec(ua);
    if (match != null) {
        return { browser: match[2] || "", version: match[1] || "0" };
    }
    if (match != null) {
        return { browser: "", version: "0" };
    }
}

try{
    var browser = uaMatch().browser;
    
    if(browser.toUpperCase() == "IE" || browser.toUpperCase() == "EDGE"){
      window.console&&window.console.log&&(
        console.log("【Lena ♥ Shane】"),
        console.log("逆风的方向\n更适合飞翔"),
        console.log("http://www.lenashane.com/")
      )
    } else {
      window.console&&window.console.log&&(
        console.log("%c【Lena %c♥ %cShane】","color:black","color:pink","color:black"),
        console.log("%c逆风的方向\n更适合飞翔","color:#1d6402"),
        console.log("%chttp://www.lenashane.com/","color:red")
      )
    }
}catch(e){}

Chrome中的效果：

Microsoft Edge中的效果：

本文由lenashane.com原创，转载请注明出处：查看原文