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

为了让喜欢按F12的访客不至于看到空空的控制台,写了点代码充实了下内容,也顺便复习下这部分内容。

console打印的文字是可以添加样式的,不过不是全部css效果都有效,这里只介绍一小部分样式。

\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.neurallinker.com","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企鹅号码%c1273727577","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;");

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 不会用代码框,所以看着有些乱套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 5,670评论 0 0
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 5,916评论 0 1
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,419评论 0 11
  • 每每夜幕降临, 繁星洒满星空, 明亮的月光, 照亮世界, 喧哗的夜晚, 灯红酒绿, 映衬着异乡人的孤寂 异乡人在天...
    安陆倪江阅读 1,796评论 0 0
  • 可是,谁也不知道,就在白垩纪的某年某月的星期三,(๑•́ ₃ •̀๑额,我也记不清是哪一天了,但我知道这天...
    吐槽世界阅读 2,444评论 0 1

友情链接更多精彩内容