腻害了！我的console.log

来源：互联网发布：淘宝卖家怎么设置特价编辑：程序博客网时间：2024/05/17 01:19

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

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

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

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

占位符描述%s字符串%d/%i整数%f`浮点%o/%O对象%ccss样式

首先显示文字：

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");

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

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

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

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

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

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

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

<!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>

0 0