小蝌蚪日記：經過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