JS_console.log()的进阶使用_console打印控制台样式_编码图案

1. 基本语法:

console.log(object [, object,])

2. 占位符:

console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o):

占位符 作用
%s 字符串
%d or %i 整数
%f 浮点数
%o 可展开的DOM
%O 列出DOM的属性
%c 根据提供的css样式格式化字符串
  • 图片输出
console.log("%c","background:url(图片路径) no-repeat;padding:50px 300px;line-height:120px");
  • 换行输出
console.log([
	"第一行",
	"第二行"
].join('\n'));

不过要注意了:

  • console不能定义img,因此用背景图片代替。
  • console不支持width和height,利用空格和font-size代替;还可以使用padding和line-height代替宽高。
  • chrome没出来?没出来就对了……不支持啊!原因是ConsoleViewMessage.js源码把url和谐掉了。不过可以下载firebug插件查看啦~ gif图片也是支持的~~~
  • console是默认换行的。

控制台样式案例:

在这里插入图片描述

console.log("%c响应数据%c"+new Date(),
	'background: #00cc00; color: #fff; border-radius: 3px 0 0 3px;padding:2px 5px',
	'background: #1475B2; color: #fff; border-radius: 0 3px 3px 0;padding:2px 5px',
)

制作我们自己的字符图案:

ASCII字符画制作工具,图片转ascll字符
img2txt
ASCII Generator Portable(将图片转为字符画) v2.0下载

制作思路:找到一个我们喜欢图案,变成这样的字符形式,然后字符形式的图案的换行(\r\n)都去掉,换成 \n,这样就能正确的在console.log()中正确打印。

猜你喜欢

转载自blog.csdn.net/weixin_44599931/article/details/108578353
今日推荐