豫ICP备17040950号-2

程序员的浪漫-浏览器控制台输出炫丽色彩

文章目录
  1. 1. 用法示例:
  2. 2. 展示效果:
  3. 3. 多内容样式用法:
  4. 4. 常用场景:

大家有没有注意到在有些网站中,当我们打开F12的时候,里边会有console内容,这些内容还是有样式的,如果之前没有见到过,你可以打开百度首页,按下F12,里边会有百度的招聘信息,或者打开京东首页、知乎首页,都会看到一些个性的招聘信息,我们自己写的console.log(),在浏览器中是没有样式的,这是怎么做到的呢?

其实浏览器js中的console是可以自定义样式的,可以显示缤纷的颜色,甚至图片。你想到的差不多都可以实现!

用法示例:

%c 代表之后的文本会使用第二个参数给定的css样式来格式化

1
console.log("%c一些文本 ", "css 代码");

展示效果:

jsbasicconsoleskill0101.png

多内容样式用法:

如果需要在一行上输出多个字符串的不同自定义样式,CSS样式需要用英文逗号隔开。

1
console.log("%c内容1%c内容2", "内容1的css代码", "内容2的css代码");

常用场景:

1、炫丽3D字体

1
2
//输出炫丽的3D立体字体
console.log("%c云卡物联"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em")

​ 效果如图:

jsbasicconsoleskill0102.png

2、多样式内容

1
2
//在一行输出多个不同样式的内容
console.log("%c技术联系:%c张工-13803831229","padding:7px 20px;background:#000;color:#fadfa3;","padding:7px 10px;background:#fadfa3;");

​ 效果如图:

jsbasicconsoleskill0103.png

3、自定义图片

1
2
//输出自定义图片或背景图
console.log("%c\n 你好ceshi ", "font-size:91px;background:url('http://itbag.cn/img/headportrait.jpg');");

​ 效果如图:
jsbasicconsoleskill0104.png