小蝌蚪日记:通过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

腾讯前端切图犬

2.5k 声望
1.3k 粉丝
0 条评论
推荐阅读
小蝌蚪传记:前端实用技巧,通过babel精准操作js文件
今天是暗恋她的第90天,但我马上就要失恋了 因为组织架构变动,我要换到一个离她很远的地方暗恋她的90天里,我一直在997每天都在跟同类互相残杀我厌倦了和一群老男人加班的日子她是这段黑暗时间里,唯一的光她曾...

第一名的小蝌蚪8阅读 2.1k评论 7

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.8k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan41阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图

腾讯前端切图犬

2.5k 声望
1.3k 粉丝
宣传栏