腻害了！我的console.log

最新推荐文章于 2023-04-15 20:57:44 发布

沈志勇说

最新推荐文章于 2023-04-15 20:57:44 发布

阅读量1k

点赞数

分类专栏： console javascript笔记

本文链接：https://blog.csdn.net/u011456552/article/details/53931652

版权

javascript笔记同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

console

2 篇文章 0 订阅

订阅专栏

前不久我自己写过一篇关于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>