console打印样式

╰半夏微凉° 2022-01-27 15:51 212阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>测试打印样式</title>
    </head>
    
    <body>
    
    
        <script> //格式化输出 /* console.log支持的格式标志有: %s 占位符 %d 或 %i 整数 %f 浮点数 %o%O object对象 %c css样式 */ // console.log() 这个应该是最常用的 // console.error() 输出错误信息 会以红色显示 // console.assert(bool,”info”) 如果bool为false 打印出info 否则不打印 // console.warn() 打印警告信息 会以黄色显示 // console.info() 打印一般信息 // console.clear();//清空上面的console显示 var e = "%c"; var n = "color:red;text-shadow:5px 5px 2px #fff, 5px 5px 2px #373E40, 5px 5px 5px #A2B4BA, 5px 5px 10px #82ABBA;font-weight:bolder;font-size:55px" var r = "color:#495A80;text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 1px 0 #bbb;font-size:20px"; var red = "color:red;" console.info(e + "哈哈", n); console.info(e + "你知道,你在干什么?:-)\r\n", r); console.log( '同学，祝贺你喜提彩蛋~或许你们还在犹豫是否加入， 我会坦诚的告诉你我们超酷； 在这里大家都用无人车代步， AI音箱不仅播放还可以交互； 人工智能是发展的核心技术， 做自己让未来不只领先几步； 在这里做自己， 欢迎来到百度！ ' ) console.log(e + '百度2019校园招聘简历提交：http://dwz.cn/XpoFdepe （你将有机会直接获得面试资格）', red); console.log("%c%s", "color: red; background: yellow; font-size: 24px;", "警告！"); </script>
    
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]

告别单调的打印样式！！！！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]: /images/20220127/07bb8eff9a814bf9836e1397adb4d8c7.png