控制台:控制台艺术字 & 为控制台输出增加样式(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 };< ...
随机推荐
- docker版LAMP(PHP+MYSQL+APACHE)配置
最近在搭测试环境,一开始就在vagant和docker之间来回折腾.两者其实都非常适合用来搭开发环境:但最终让我决定用Docker的原因是因为Vagant在hyper-v下出现了一些奇怪的问题,所以D ...
- vue菜单切换
HTML: <div id="box"> <ul> <li v-for= "(item,index) in arry"> & ...
- TCP可靠传输
1. TCP 可靠性如何保证? 信道可靠:用三次握手.四次挥手保证连接正确: 数据正确:分区编号.校验和.超时重传: 传输控制:流量控制.拥塞控制 2. 重传机制 TCP可靠传输方式是序列号与确认应答 ...
- gRPC学习之四:实战四类服务方法
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- Python包安装过程
以下是paramiko-1.7.7.1的安装过程,可以看到整个过程分为步,第一步是build,就是拷贝源文件到build文件夹里, F:\VMFiles\tmpFiles\paramiko-1.7.7 ...
- 关于Ajax异步提交登录及增删改查小项目制作-登录
一.登录的完成 先导包jquery和MySql //异步提交 <script type="text/javascript" src="js/jquery-1.8.2 ...
- HTTP状态码关于各个网站的实地调查
我使用的是新版Edge浏览器,右键,点击检查,点击网络,可以看到请求的各种文件.那么以此来看看状态码的使用吧. 101 与websocket相关,websocket在慕课网中的应用 - KeBoom ...
- spring cloud 的hystrix 熔断器 和feign 调用的使用
1, 添加依赖 <dependency> <groupId>org.springframework.cloud</groupId> <artifactId&g ...
- ASP.NET Core教程:使用Supervisor做ASP.NET Core应用程序守护进程
一.前言 在上一篇文章中,我们讲解了如何在Linux服务器上面部署ASP.NET Core应用程序,并且使用Nginx作为反向代理.我们在Linux服务器上面,是通过ASP.NET Core自宿主的方 ...
- mzy,struts学习(三):action中获得servlet中三域一参的三种方法
package com.mzy.servlet; import java.util.Arrays; import java.util.Map; import javax.servlet.Servlet ...