站点彩蛋 —— console输出

如果你打开我Blog,然后按下F12打开控制台,切换到Console,那么你会看到如下的界面~

site-console-log-hrwhisper.me

这是怎么实现的呢?

还有好多其他的站点,比如知乎:

site-console-log-zhihu

比如百度

site-console-log-baidu

其实很多都是用这个做招聘信息~

如何实现这个呢?让人不经意间ctrl + shift + i打开,眼前一亮的东西?

请看本文:

 

console.log()

JS里有个console.log()函数,用于在控制台上输出信息。

上面的图像其实就是输出指定的字符。

你可以直接试试,打开F12控制台(或者直接ctrl + shift + i),输入如下内容

效果如下:

site-console-log-helloworld

console.log() 美化

默认输出白底黑字的~丑丑哒

那么怎么改变颜色啥的呢?

答案是用%c来表名格式,在console.log中每个%c对应一系列css属性,如下。

中间特插入%c,否则会从一开始到下一个%c字体都是蓝色的~

效果如下

site-console-log-beautiful

 

Javascript 多行字符串

在python下,多行字符可以直接”’ ”’包括起来,JS则没有这样的功能,JS多行 字符串方法很多,下面介绍比较优雅的方法

函数注释

这是我觉得最优雅的方法。

直接声明个函数,在函数里写上注释,然后转化为数组,进行注释替换(/* 和*/)

请自行运行如上代码 :)

 

 

Code

经过前面的探讨,我们只要有好看的字符画,然后丢到函数注释里面就好啦~~~

如,我的blog如下:

 

其实搜狗输入法自带了字符画(昨天特意下来看看有啥=v=,然后继续用系统自带的输入法。。。windows 10自带输入法已经很好用了的感觉,还不会广告啥的~)

更多好看的字符画:可以google一下或者百度一下字符画~

比如世界地图

site-console-log-world-map

还有一个叼叼的:

 

site-console-log-programmer

还有自由女神像(Statue Of Liberty)!

 

site-console-log-statue-of-liberty

本博客若无特殊说明则由 hrwhisper 原创发布
转载请点名出处:细语呢喃 > 站点彩蛋 —— console输出
本文地址:https://www.hrwhisper.me/site-console-log/

听说帅的人已经打赏了

OtherCodes , . permalink.

4 thoughts on “站点彩蛋 —— console输出

Leave a Reply

Your email address will not be published. Required fields are marked *