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

[airuikun]

作者：第一名的小蝌蚪

微信公众号：前端屌丝

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/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技能了

虽然没什么用

嘻嘻

。。。

。。。

。。。

深夜，凌晨二点

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

随着女蛇妖被爷爷打败

小蝌蚪打翻了牛奶

擦拭干净后

在床边点了根烟

强烈的孤独感袭卷背后

世间一切都变得索然无味

寂静的夜 又归于平静

作者：第一名的小蝌蚪

微信公众号：前端屌丝

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

[wuyonggang100]

我看完了，你真是个人才

[demigodliu]

真的是厉害了~