前不久我自己写过一篇关于console的博客,今天我再过来补充一点。之前文章
最近我在用百度和支付宝的时候,看到了下图:
由于本能的好奇!我就去查了一下console。也想做一个相对较炫点的输出信息,放到自己的网站里面。顺便写一篇博客,希望能帮到与我有相同想法的童鞋。(*^__^*) !
先从官方的文档说起:(个人感觉跟c语言真的很像,c语言不愧为母语。当然我主要说的是 最后的%c css样式)。
占位符 | 描述 |
---|---|
%s | 字符串 |
%d/%i | 整数 |
%f` | 浮点 |
%o/%O | 对象 |
%c | css样式 |
首先显示文字:
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>