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

console.log('hello world');

效果如下:

site-console-log-helloworld

console.log() 美化

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

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

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

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多行 字符串方法很多,下面介绍比较优雅的方法

函数注释

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

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

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如下:

	 	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

本博客若无特殊说明则由 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 *