站点彩蛋 —— console输出

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

这是怎么实现的呢？还有好多其他的站点，比如知乎：

比如百度

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

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

请看本文：

console.log()

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

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

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

1	console.log('hello world');

效果如下：

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字体都是蓝色的~

效果如下

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')