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

[airuikun]

深夜，十二点

昏暗的房间，一卷餐巾纸

注定这是个不平凡的夜

。。。

小蝌蚪打开了珍藏在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/taag/#p=display&f=Soft&t=Type%20Something%20

。。。

console.log还能画流程图

网址：http://stable.ascii-flow.appspot.com/#Draw

。。。

console.log里添加emoji表情包

网址：http://getemoji.com/

。。。

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

网址：https://www.degraeve.com/img2txt.php

。。。

最后一个技能

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

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

以上就是所有console.log技能了

虽然没什么用

嘻嘻

。。。

。。。

。。。

深夜，凌晨二点

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

随着女蛇妖被爷爷打败

小蝌蚪打翻了牛奶

擦拭干净后

在床边点了根烟

强烈的孤独感袭卷背后

世间一切都变得索然无味

寂静的夜 又归于平静

作者：第一名的小蝌蚪

微信公众号：前端屌丝