首页 > 其他 > 详细

控制台:控制台艺术字 & 为控制台输出增加样式(console.log( ))

时间:2021-03-18 14:17:19      阅读:140      评论:0      收藏:0      [点我收藏+]

控制台/代码文档LOGO

技术分享图片

 

除了知乎的控制台,大部分的代码文档都有这样的字符logo。

下面这个网站可以自动生成符号艺术字:

 

Text to ASCII Art Generator (TAAG)

控制台输出通过多行  log  语句或者  \n  转义字符换行,如果用的是联想功能强大的编码工具,只需 CTRL CV 就好了

如果是放在代码里直接用注释符包裹即可

 

控制台输出样式

通过  %c  开始一个结点,可以理解为一个样式生效的元素标签,%c没有结束符,如果后半节需要使用控制台默认样式,只需要在后半节的开始部分加上  %c  ,并加上一个空的CSS字符串  console.log(‘%c ho %c me‘, ‘color: red‘, ‘ ‘ 

再以类似数组指针的方式,在log语句中加入css代码,用引号包裹。

console.log(‘%c 应急食品的百种烹饪方式 \n‘ +
        ‘%c                       ——正义人 ‘, ‘color: #333‘, ‘color: #999‘)

技术分享图片

 

除了color以外可以还可以使用任何非浏览器内核提供的CSS、CSS3样式,甚至可以将自己的照片输出在控制台。

需要注意的是几个开始符就写几套样式,否则后面未定义样式的节段都会应用最后一个定义的样式,且未定义样式的  %c  也会被当成字符输出打印出来。

 


 

console.log(‘%c _____________________________\n‘ +
        ‘%c   ______     %c______     %c__  __    \n‘ +
        ‘%c  /\\___  \\   %c/\\___  \\   %c/\\_\\_\\_\\   \n‘ +
        ‘%c  \\/_/  /__  %c\\/_/  /__  %c\\/_/\\_\\/_  \n‘ +
        ‘%c    /\\_____\\   %c/\\_____\\   %c/\\_\\/\\_\\ \n‘ +
        ‘%c    \\/_____/   %c\\/_____/   %c\\/_/\\/_/\n‘ +
        ‘%c       _____________________________\n‘ +
        ‘   ‘,‘color:#ff0000‘,‘color:#ff0000‘,‘color:#ff3b00‘,‘color:#ff7500‘,‘color:#ff7800‘,‘color:#FD7B00‘,‘color:#FFAD00‘,‘color: #FEDA00‘,‘color:#D0FD00‘,‘color:#93FF00‘,‘color:#80FF00‘,‘color:#1AFF00‘,‘color:#00FF2E‘,‘color:#00FF3B‘,‘color:#00FFB1‘,‘color:#00F2F9‘,‘color:#00E0F9‘)

技术分享图片

 

 

 

技术分享图片

 

控制台:控制台艺术字 & 为控制台输出增加样式(console.log( ))

原文:https://www.cnblogs.com/97z4moon/p/14554621.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!