小蝌蚪日记:通过console.log高仿FBI Warning
airuikun opened this issue · 2 comments
作者:第一名的小蝌蚪
微信公众号:前端屌丝
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表情包
。。。
把一张图片转成字符画,如下:
网址:https://www.degraeve.com/img2txt.php
。。。
最后一个技能
把js代码,转成漂亮的代码图片
以上就是所有console.log技能了
虽然没什么用
嘻嘻
。。。
。。。
。。。
深夜,凌晨二点
小蝌蚪看了一整晚带马赛克的葫芦娃
随着女蛇妖被爷爷打败
小蝌蚪打翻了牛奶
擦拭干净后
在床边点了根烟
强烈的孤独感袭卷背后
世间一切都变得索然无味
寂静的夜 又归于平静
作者:第一名的小蝌蚪
微信公众号:前端屌丝
blog & github: https://github.com/airuikun/blog
我看完了,你真是个人才
真的是厉害了~