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

文章目录

1. 1. 用法示例：
2. 2. 展示效果：
3. 3. 多内容样式用法：
4. 4. 常用场景：

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

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

用法示例：

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

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

展示效果：

多内容样式用法：

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

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

常用场景：

1、炫丽3D字体

//输出炫丽的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")

​ 效果如图：

2、多样式内容

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

​ 效果如图：

3、自定义图片

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

​ 效果如图：