HTML特效——五、控制台. log()的图案打印

顺晟科技

2022-09-15 21:08:49

352

写前端代码，肯定是离不开console.log()调试的。但是，你们知道其实还能使用CSS来设置控制台打印的日志。所以这篇为大家介绍一下如何花样打印日志。

如果查看Mozilla Developer文档Console，你会看到该Console对象支持一些漂亮的功能，例如字符串替换和CSS样式。这两个功能都通过在第一个console.log()参数内使用特殊标记，然后使用一系列用于修改第一个参数的后续参数来工作。

字符串替换，我们可以%o像这样插入一个对象：

console.log("我的document是:%o", document);

CSS样式插入，我们可以使用以下方式设置相同的日志语句的样式%c：

console.log( "%c我的document是: %o", "color: red ;", document );

打印的字体变成了红色。请注意，第二个和第三个参数分别用于修改%c和%o。在这种情况下，color: red影响会影响后面的所有内容%c。

下面我们来看看更多的玩法吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <title>控制打印样式</title>
</head>
<body>
<script type="text/javascript">

    console.log("%cAltering the text color", "color: fuchsia"); //文本颜色

    console.log(
        "%c字体的多样化显示",
        "background-color: fuchsia ; color: white ; font-weight: bold ; " +
        "font-size: 20px ; font-style: italic ; text-decoration: underline ; " +
        "font-family: \'american typewriter\' ; text-shadow: 1px 1px 3px black ;"
    ); //字体的多样化显示


    console.log(
        "%c给文本加上边框",
        "display: inline-block ; border: 3px solid red ; border-radius: 7px ; " +
        "padding: 10px ; margin: 20px ;"
    );//边框样式

    console.log(
        "%c背景图片",
        "display: inline-block ; background-image: url( \'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg&refer=http%3A%2F%2Fa2.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612363383&t=9672c03657ad4a95d026f8a512979328\' ) ; " +
        "background-size: cover ; padding: 10px 175px 158px 10px ; " +
        "border: 2px solid black ; font-size: 11px ; line-height: 11px ; " +
        "font-family: monospace ;"
    ); //显示一张背景图片

    //相同的CSS样式可以与许多其他控制台方法一起使用，例如.group（）方法。
    //创建一个组
    console.group("%c组内容输出", "background-color: #e0005a ; color: #ffffff ; font-weight: bold ; padding: 4px ;");
    //分组输出
    console.log("我是组里面的内容1");
    console.log("我是组里面的内容2");
    console.log("我是组里面的内容3");
    //结束
    console.groupEnd();
</script>
</body>
</html>

我们只是试图在各种语句中投放大量CSS，console.log()以查看它们所支持的内容。并且，当我们在Chrome中运行上述代码时，在控制台输出如下：

为了让这个更好用一点，我将创建一个echo对象来代替console。意思是，它将具有受控制台启发的方法，例如：

// 创建一个日志记录API，其中包含一些特殊的格式信息。
var echo = (function () {
    var queue = [];
    var ECHO_TOKEN = {};
    var RESET_INPUT = "%c ";
    var RESET_CSS = "";
    function alertFormatting(value) {
        
        queue.push({
            value: value,
            css: "display: inline-block ; background-color: #e0005a ; color: #ffffff ; font-weight: bold ; padding: 3px 7px 3px 7px ; border-radius: 3px 3px 3px 3px ;"
        });
        return (ECHO_TOKEN);
    }
    function warningFormatting(value) {
        queue.push({
            value: value,
            css: "display: inline-block ; background-color: gold ; color: black ; font-weight: bold ; padding: 3px 7px 3px 7px ; border-radius: 3px 3px 3px 3px ;"
        });
        return (ECHO_TOKEN);
    }

    function using(consoleFunction) {
        function consoleFunctionProxy() {
            var inputs = [];
            var modifiers = [];
            for (var i = 0; i < arguments.length; i++) {
                if (arguments[i] === ECHO_TOKEN) {
                    var item = queue.shift();
                    inputs.push(("%c" + item.value), RESET_INPUT);
                    modifiers.push(item.css, RESET_CSS);
                    // 对于其他所有参数类型，直接输出值。
                } else {
                    var arg = arguments[i];
                    if ((typeof (arg) === "object") || (typeof (arg) === "function")) {
                        inputs.push("%o", RESET_INPUT);
                        modifiers.push(arg, RESET_CSS);
                    } else {
                        inputs.push(("%c" + arg), RESET_INPUT);
                        modifiers.push(RESET_CSS, RESET_CSS);
                    }
                }
            }
            consoleFunction(inputs.join(""), ...modifiers);
            // 全部输出后，清空队列。
            queue = [];
        }
        return (consoleFunctionProxy);
    }

    return ({
        // 控制台功能。
        log: using(console.log),
        warn: using(console.warn),
        error: using(console.error),
        trace: using(console.trace),
        group: using(console.group),
        groupEnd: using(console.groupEnd),
        // 格式化功能。
        asAlert: alertFormatting,
        asWarning: warningFormatting
    });

})();
// 混合打印
echo.log(
    echo.asAlert("我是错误"),
    "哈哈哈",
    {"我": "是一个对象"},
    null,
    ["我是一个数组"],
    function amAFunction() { //方法
    },
    echo.asWarning("我是警告")
);
echo.log();
// 测试打印
echo.group(echo.asWarning("周星驰·功夫"));
echo.log("主演：周星驰");
echo.log("类型", echo.asAlert("喜剧!"), echo.asWarning("动作"));
echo.log("2004年");
echo.log("票房", echo.asWarning("1.73亿"));
echo.groupEnd();
echo.log();
echo.log(echo.asAlert("多重打印"), "我是外层");

基本方法是，格式化方法asAlert()和asWarning()会将值和CSS推送到内部队列中。然后，console代理方法将内部队列合并为单个console调用。

正如你所看到的，这种echo抽象使得它封装成一个简单好调用的方法，然后将所有可变参数代理函数传递给它即可。

希望这些有趣的东西可以带给你快乐。

以上就是整篇的所有内容了。

上一篇：Html中的位置：绝对的意思下一篇：前端内容HTML