让Console漂亮起来,在浏览器控制台添加网站说明

  • 内容
  • 相关

  让喜欢按F12的访客不至于看到空空的控制台,console打印的文字是可以添加样式的,不过不是全部css效果都有效,这里只介绍一小部分样式。

让Console漂亮起来,在浏览器控制台添加网站说明

\n是换行,可以将一个字符串设置成多行
%c标记之后的内容使用对应样式,格式如 console.log('%c第一个样式%c第二个样式','css1','css2'); 如此对应
样式和普通的css效果基本一致,可以设置文字颜色,背景颜色,字体大小,间距,边距等等。还支持部分css3高级效果。
甚至还支持输出图片,不过我怎么都没有弄出来。。。
代码如下:

. console.log("%c%c博客名称%c森七博客","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#3fa9f5;line-height:28px;font-size:16px;"); console.log("%c%c网站地址%chttp://www.mosq.cn","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#ff9900;line-height:28px;font-size:16px;"); console.log("%c%c企鹅号码%c1134246819","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#008000;line-height:28px;font-size:16px;"); console.log("%c%c任何足够先进的技术,初看皆与魔法无异!我一直觉得这句话很有道理,不知道你是不是也这样认为呢。(滑稽)","line-height:28px;","line-height:28px;padding:4px 0px;color:#fff;font-size:16px;background-image:-webkit-gradient(linear,left top,right top,color-stop(0,#ff22ff),color-stop(1,#5500ff));color:transparent;-webkit-background-clip:text;");



本文标签:

版权声明:若无特殊注明,本文皆为《森七》原创,转载请保留文章出处。

本文链接:让Console漂亮起来,在浏览器控制台添加网站说明 - http://www.mosq.cn/post-161.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注。采用输入QQ快速评论,有人回复邮件通知。

评论

7条评论
  1. avatar

    茗血 Lv.1 Chrome 62.0.3202.94 Chrome 62.0.3202.94 Windows 7 Windows 7 回复

    跟js输出图片一样,顺便说一下,森七你的站长统计没有用异步加载,所以比较慢,而且报错了

    1. 森七 uBrowser 6.2.3831.602 uBrowser 6.2.3831.602 Windows 7 x64 Edition Windows 7 x64 Edition 回复

      回复了茗血:不是很懂统计是怎么回事,会仔细看看

    2. 茗血 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows 7 Windows 7 回复

      回复了森七:<pre>
        <script>
          $(function () {
            // 延迟CNZZ统计, 以免影响页面载入
            var cz = document.createElement("script");
            cz.src = "//s11.cnzz.com/z_stat.php?id=125974259&web_id=125974259";
            document.getElementsByTagName('body')[0].appendChild(cz);
          });
        </script>
      </pre>
      上面的两个id换成你的统计id就可以了,延迟加载,而且还不报错,何乐而不为呢

    3. 森七 uBrowser 6.2.3831.602 uBrowser 6.2.3831.602 Windows 7 x64 Edition Windows 7 x64 Edition 回复

      回复了茗血:用上了,真不错。谢谢~献花

  2. avatar

    小萝博客 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows 7 Windows 7 回复

    貌似改版了吧

    1. avatar

      Brian. Lv.1 Internet Explorer  Internet Explorer  iPhone iOS 10.3.1 iPhone iOS 10.3.1 回复

      貌似是御坂的教程吧,

      1. 森七 QQbrowser QQbrowser Android 5.1.1 Android 5.1.1 回复

        回复了Brian.:御坂是谁?这个是黑联兄写的