腻害了！我的console.log

- 日理万妓 2022-07-13 06:59 149阅读 0赞

前不久我自己写过一篇关于console的博客，今天我再过来补充一点。[之前文章][Link 1]

最近我在用百度和支付宝的时候，看到了下图：

![20170104105901700][]       ![20170104105912965][]

由于本能的好奇！我就去查了一下console。也想做一个相对较炫点的输出信息，放到自己的网站里面。顺便写一篇博客，希望能帮到与我有相同想法的童鞋。(\*^\_\_^\*) ！

先从官方的文档说起：(个人感觉跟c语言真的很像，c语言不愧为母语。当然我主要说的是 最后的%c css样式)。

<table> 
 <tbody> 
  <tr> 
   <th>占位符</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>%s</td> 
   <td>字符串</td> 
  </tr> 
  <tr> 
   <td>%d/%i</td> 
   <td>整数</td> 
  </tr> 
  <tr> 
   <td>%f`</td> 
   <td>浮点</td> 
  </tr> 
  <tr> 
   <td>%o/%O</td> 
   <td>对象</td> 
  </tr> 
  <tr style="color:yellow; background-color:red"> 
   <td>%c</td> 
   <td>css样式</td> 
  </tr> 
 </tbody> 
</table>

首先显示文字：

console.log("%cszy1000 ", "font-size:80px;font-weight;bolder;background-image: linear-gradient(353deg,#89C027,#89C027 28%,#E96036 28%,#E96036 49%,#FEF158 49%,#FEF158 72%,#76C5EE 72%);background-image: -webkit-linear-gradient(353deg,#89C027,#89C027 28%,#E96036 28%,#E96036 49%,#FEF158 49%,#FEF158 72%,#76C5EE 72%);background-image: -moz-linear-gradient(353deg,#89C027,#89C027 28%,#E96036 28%,#E96036 49%,#FEF158 49%,#FEF158 72%,#76C5EE 72%);background-clip:text;;-webkit-background-clip:text;color:transparent");

![20170104113244104][]

书写样式的时候，不能有换行，否则不行的。

接下来是显示图片,代码效果如图：

console.log("%c            ", "font-size:80px;line-height:120px;background:url('http://www.csdn.net/css/logo.png')  no-repeat;");

![20170104113843685][]

放图片的时候有几个小坑，特此标注一下。

**一、贴入图片必须要为线上图片（gif也是可以的），本地的我测试过不知道 为什么不行！希望有知道的同学留言告知。**

**二、要在%c 后加一些空格 "%c      ",然后要加font-size这样的话就可以撑开。否则图片不能显示。或者在写样式的时候加padding 撑开。不清楚的同学，可以下载我后面的代码。本地测试一下。**

最后说一点，如果遇到下图这样的情况，图出来了，但是两行间隔太小。记得加：line-height就可解决。

![20170104121814721][]

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Szy1000</title>
    	<script>
    		console.log("%cszy1000 ", "font-size:80px;font-weight;bold;background-image: linear-gradient(353deg,#89C027,#89C027 28%,#E96036 28%,#E96036 49%,#FEF158 49%,#FEF158 72%,#76C5EE 72%);background-image: -webkit-linear-gradient(353deg,#89C027,#89C027 28%,#E96036 28%,#E96036 49%,#FEF158 49%,#FEF158 72%,#76C5EE 72%);background-image: -moz-linear-gradient(353deg,#89C027,#89C027 28%,#E96036 28%,#E96036 49%,#FEF158 49%,#FEF158 72%,#76C5EE 72%);background-clip:text;;-webkit-background-clip:text;color:transparent");
    		console.log("%c            ", "font-size:80px;line-height:120px;background:url('http://www.csdn.net/css/logo.png')  no-repeat;");
    		console.log("%c", "padding:50px 200px;line-height:120px;background:url('http://www.csdn.net/css/logo.png')  no-repeat;");
    		console.log("%c", "padding:50px 200px;line-height:120px;background:red");
    	</script>
    </head>
    <body>
    </body>
    </html>

[Link 1]: http://blog.csdn.net/u011456552/article/details/53442985
[20170104105901700]: https://img-blog.csdn.net/20170104105901700
[20170104105912965]: /images/20220713/2b9ae22d6ceb4ff4925e85c9e07419f2.png
[20170104113244104]: /images/20220713/8ce273df72e8491c9dc118012f3851e8.png
[20170104113843685]: /images/20220713/7179c19153f1459780bb5cc88005aa46.png
[20170104121814721]: /images/20220713/8d554df9125b4eac8381d094012f8c4a.png