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

原创 彭淇  2017-10-06 16:29:44  阅读 2634 次 评论 6 条

让喜欢按F12的访客不至于看到空空的控制台,console打印的文字是可以添加样式的,不过不是全部css效果都有效,这里只介绍一小部分样式。
    \n是换行,可以将一个字符串设置成多行
    %c标记之后的内容使用对应样式,格式如 console.log('%c第一个样式%c第二个样式','css1','css2'); 如此对应
    样式和普通的css效果基本一致,可以设置文字颜色,背景颜色,字体大小,间距,边距等等。还支持部分css3高级效果。
    甚至还支持输出图片,不过我这里测试没有出现效果。
    代码如下:

<script>
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.pengqi.club","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企鹅号码%c715366739","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;");
</script>


    代码效果如下:


让Console漂亮起来,在浏览器控制台添加网站说明  加载 图形 分享 网页 第1张

本文地址:https://www.pengqi.club/blog/146.html
版权声明:本文为原创文章,版权归 彭淇 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

评论列表

  1. 荷鲁斯
    荷鲁斯 【县长】  @回复

    好吧 face_16

  2. 唯美陌阡
    唯美陌阡 【县长】  @回复

    [code][S19]好羞射,文章真的好赞啊,顶博主![/code]
    这个可以有。(⊙﹏⊙)终于搞定寝室WIFI啦,连上网的心情是无与伦比的美丽[S22]

    • 彭淇
      彭淇 【站务管理】 2017-10-08 11:24:49  回复

      @唯美陌阡@唯美陌阡:好有缘,我前天凌晨也才搞完寝室WiFi,速度比以前稍微快点了

      • 唯美陌阡
        唯美陌阡 【县长】 2017-10-08 13:47:21  回复

        @彭淇@彭淇:(*^▽^*),主要是电信比较坑,想要弄路由器就得破解一人一号限制