小蝌蚪日记：经过console.log高仿FBI Warning

做者：第一名的小蝌蚪

微信公众号：前端屌丝

blog & github： https://github.com/airuikun/blog

深夜，十二点

昏暗的房间，一卷餐巾纸

注定这是个不平凡的夜

。。。

小蝌蚪打开了珍藏在C盘深处的隐藏文件夹

里面罗列着许多晦涩难懂的文件名

"日理万机.mp4"、"操劳过分.mp4"

“多人运动.mp4”、“2v2敏捷开发.mp4”

别问这些是什么，问就是前端开发教学视频

。。。

小蝌蚪在现实生活中，是一个低端屌丝

受尽女神的冷嘲热讽

但今夜，个人世界我作主

小蝌蚪点开了"采蘑菇的小姑娘.mp4"

笑容逐渐癫狂

。。。

打开后，映入眼帘的是一副FBI Warning大图

众所周知，FBI Warning是东方神秘图腾

它象征着一场大战前，冲锋的号角

小蝌蚪起身

对本身的双手鞠躬：“对不起，今晚又要麻烦大家俩了”

做为一名低级前端工程师

小蝌蚪将用双手

展现如何经过console.log高仿FBI Warning大图

效果以下：

代码以下：

源码：fbi-warning

实现原理很简单

console.log里是能够解析css代码的

格式为：console.log("%c内容1 %c内容2", "css代码1"，"css代码2");

。。。

实现一个FBI Warning须要4个%c

第一个%c对应的css代码为

background: #000; 
    font-size: 18px; 
    font-family: monospaces;

这是一个纯黑色背景

黑色象征神秘与性感

彷佛为接下来的内容打下了铺垫

第二个%c对应的css代码为

background: #f33; 
    font-size: 18px; 
    font-family: monospace;
    color: #eee; 
    text-shadow:0 0 1px #fff;

它为“FBI Warning”标题添加了红色背景

红色表明增强

警示每一位看客要遵纪守法

让心怀不轨的人产生羞耻感和罪恶感

第三个%c也是黑色背景

第四个%c对应的css为：

background: #000; 
    font-size: 18px; 
    font-family: monospace; 
    color: #ddd; 
    text-shadow:0 0 2px #fff;

黑色背景配上白色的字

就好像一个落魄的屌丝

可是心里纯洁无瑕

。。。

以上就是整个高仿FBI Waring的实现了

我敲了6年代码

曾被3位女神抛弃

被2个渣女玩弄过

当过1年小三

再看这幅FBI Waring图 感慨万千

它实际上是当代屌丝的一个缩影

描述了一个想爱但不敢爱

只能靠想象来和女神为爱鼓掌的落魄屌丝

卑微且虔诚

。。。

言归正传

在平时开发中console.log搭配一些工具

还能有一些好玩的功能

好比转化'FBI WARNING'成一个字符画

网址：http://patorjk.com/software/t...

。。。

console.log还能画流程图

网址：http://stable.ascii-flow.apps...

。。。

console.log里添加emoji表情包

网址：http://getemoji.com/

。。。

把一张图片转成字符画，以下:

网址：https://www.degraeve.com/img2...

。。。

最后一个技能

把js代码，转成漂亮的代码图片

网址：https://carbon.now.sh

以上就是全部console.log技能了

虽然没什么用

嘻嘻

。。。

。。。

。。。

深夜，凌晨二点

小蝌蚪看了一整晚带马赛克的葫芦娃

随着女蛇妖被爷爷战胜

小蝌蚪打翻了牛奶

擦拭干净后

在床边点了根烟

强烈的孤独感袭卷背后

世间一切都变得索然无味

寂静的夜 又归于平静

做者：第一名的小蝌蚪

微信公众号：前端屌丝

blog & github： https://github.com/airuikun/blog