控制台:控制台艺术字 & 为控制台输出增加样式(console.log( ))
控制台/代码文档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')

- END -
控制台:控制台艺术字 & 为控制台输出增加样式(console.log( ))的更多相关文章
- JavaScript原型链中toString()方法输出alert()和console.log()得到不同的结果
<script language="javascript"> function myObj(){ var total = 0; } myObj.prototype.ad ...
- 如何在浏览器控制台(console)里输出彩色样式调试信息
console.log(XX,XX,XX) log 的第一个参数声明第二.第三个参数的作用,第二个参数就是样式,第三个参数是要输出的字符串 console.log("%c%s", ...
- console.log添加样式及图片
console.log在控制台打出css样式的文字及图片 谷歌开发者中心上面关于谷歌浏览器控制台console.log()的文档 Format Specifier %s Formats the val ...
- Chrome 控制台新玩法-向输出到console的文字加样式
Chrome 控制台新玩法-向输出到console的文字加样式 有兴趣的同学可以文章最后的代码复制贴到控制台玩玩. Go for Code 在正常模式下,一般只能向console 控制台输出简单的文字 ...
- 前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片
前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...
- C# 基础控制台程序的创建,输出,输入,定义变量,变量赋值,值覆盖,值拼接,值打印
基础学习内容有 Console.WriteLine("要输出的内容");//往外输出内容的 Console.ReadLine(); //等待用户输入,按回车键结束,防止程序闪退 控 ...
- 2017-2-17 c#基础学习 (控制台程序的创建,输出,输入,定义变量,变量赋值,值覆盖,值拼接,值打印)
1 控制台程序的创建 > 新建项目 ,选择 c#, 框架选择4.0 , 选择控制应用台程序, 选择文件保存位置 修改名字. 2 c#输出与输入 >在main函数中编写代码 >在编 ...
- node 在控制台打印有色彩的输出
在学习 node 过程中,因为没有找到有断点的调试方法,只能退而次之,在控制台打印调试. 但整个控制台的输出都是一种颜色,有时候很难找到自己需要的信息,这时,有颜色的打印就会帮上很大的忙. conso ...
- 在浏览器控制台输出内容 console.log(string);
在浏览器控制台中写如数据 1添加 <script type="text/javascript">djConfig = { isDebug: true };< ...
随机推荐
- SQL 查询总是先执行SELECT语句吗?你们都错了!
SELECT语句中子句的顺序.SELECT语句中使用时必须遵循的次序. 经过一段时间的学习,我们知道了SELECT语句超简版的语法如下: SELECT 字段名 FROM 表名 后来,我们又陆续学习了W ...
- SQL语句(三)分组函数和分组查询
目录 一.分组函数 特点 1. 各函数的简单使用 2. 搭配distinct的使用 3. COUNT 统计行数 4. 和分组函数一同查询的字段要求是group by后的字段 二.分组查询 1. 简单应 ...
- 利用共享内存实现比NCCL更快的集合通信
作者:曹彬 | 旷视 MegEngine 架构师 简介 从 2080Ti 这一代显卡开始,所有的民用游戏卡都取消了 P2P copy,导致训练速度显著的变慢.针对这种情况下的单机多卡训练,MegEng ...
- Java 14 新功能介绍
不做标题党,认认真真写个文章. 文章已经收录在 Github.com/niumoo/JavaNotes 和未读代码博客,点关注,不迷路. Java 14 早在 2019 年 9 月就已经发布,虽然不是 ...
- 4.10 Python3 进阶 - 迭代器 & 生成器
>>返回主目录 源码 from typing import Iterable, Iterator # 可迭代对象:字符串.列表.元组.字典.集合.range().enumerate()等 ...
- 使用Freemarker导出Word文档(包含图片)代码实现及总结
.personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...
- Docker部署Jenkins 2.285版持续部署集成实践(1)
抓取Jenkins镜像 docker pull jenkins/jenkins 创建映射本地路径: 运行Jenkins实例 docker for windows: docker run -it -p ...
- 手把手和你一起实现一个Web框架实战——EzWeb框架(三)[Go语言笔记]Go项目实战
手把手和你一起实现一个Web框架实战--EzWeb框架(三)[Go语言笔记]Go项目实战 代码仓库: github gitee 中文注释,非常详尽,可以配合食用 本篇代码,请选择demo3 这一篇文章 ...
- 分享一份【饿了么】Java面试专家岗面试题,欢迎留言交流哦!
前段时间有小伙伴去饿了么面试Java专家岗,记录了一面技术相关的问题,大家可以看看. 基础问题 1.数据库事务的隔离级别? 2.事务的几大特性,并谈一下实现原理 3.如何用redis实现消息的发布订阅 ...
- VirtualBox-虚拟硬盘扩容-win7
问题: 我在VirtualBox下搭建的win7系统只设置了一个C盘,当初只给硬盘分配32G,如今深受生活的毒打,发现只剩5G可用,装个PS都费劲. 我要扩容,扩容! 当前环境: VirtualBox ...