0%

站点彩蛋 —— 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),输入如下内容

1
console.log('hello world');

效果如下:

site-console-log-helloworld

console.log() 美化

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

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

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

1
2
var text  =   '%c hrwhisper %c is a %c cool boy.';
console.log(text, 'color:#337ab7;', '', 'color:red;font-style:italic');

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

效果如下

site-console-log-beautiful

Javascript 多行字符串

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

函数注释

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function getMultiLine(f) {
var lines =f.toString(); 
return lines.substring(lines.indexOf("/*") + 3, lines.lastIndexOf("*/"));   
}

var console_text = function({  
/* 
hrwhisper
is
a
handsome
boy.
*/  
};

console.log(getMultiLine(console_text));


请自行运行如上代码 :)

Code

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

如,我的blog如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 function getMultiLine(f) {
var lines =f.toString(); 
return lines.substring(lines.indexOf("/*") + 3, lines.lastIndexOf("*/"));   
}
//字符画不能随意缩进,不然显示会错位
var console_text = function({  
/* 
/~~~~~\ /~~~~~\
(~' ~~~)
\ \__________/ /
/~:::::::: ~\
/~~~~~~~-_ :::::::: _-~~~~~~~\
\ ======= / ::A::; A :\ ====== /
~-_____-~ _----------------_:: ~-____-~
/~ ~\
/ \
( () () )
`\ ./'
~-_______________-~
/~~~~\


(________)
()

努力的人本身就有奇迹 ,
努力让自己更牛逼 ^ ^
%c by hrwhisper
*/  
}
console.log(getMultiLine(console_text),'color:#337ab7;font-size:18px;font-style:italic')


 

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

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

比如世界地图

site-console-log-world-map

还有一个叼叼的:

site-console-log-programmer

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

site-console-log-statue-of-liberty
请我喝杯咖啡吧~