console.log输出五彩斑斓的颜色

console.log 最经常使用它在控制台输出信息然后进行代码调试,会发现输出信息的颜色永远是黑色。本文教学如何用 console.log在控制台输出具有五彩斑斓颜色的信息。

单色输出

javascript 复制代码
console.log('\x1B[31m红色\x1B[34m 蓝色')
javascript 复制代码
console.log('%c字符:', 'color:red', type)
javascript 复制代码
console.log('%c当前环境:' + type, 'color:blue')

多色输出

javascript 复制代码
console.log('%c123%c456', 'color: blue', 'color: green')
console.log.apply(void 0, ['%c123%c456', 'color: blue', 'color: green'])

背景输出

javascript 复制代码
console.log('\x1b[43m背景')

背景+颜色输出

javascript 复制代码
console.log('%c hello world ',
      'background: black; color: red')

背景+颜色+样式输出

javascript 复制代码
console.log('%c 输出 %c 大大 a %c 颜色', 'color:red;', 'font-size:30px;', 'color:blue;background:yellow;')

其他输出

warn输出:

javascript 复制代码
console.warn('hello world')

error输出:

javascript 复制代码
console.error('hello world')

body输出:

javascript 复制代码
console.log('%o', document.body)
相关推荐
TiAmo zhang1 分钟前
C语言实战 | 使用链表完成“贪吃蛇”游戏
c语言·开发语言·游戏
睿智的海鸥8 分钟前
html+css+js写的多人在线积分系统
javascript·css·html
weixin_83686952012 分钟前
Java中的高效数据分析与处理平台设计
java·开发语言·数据分析
朱师磊22 分钟前
elementUI的搭建使用过程
前端·javascript·elementui
亲亲晴崽22 分钟前
elementui 表格前端自主排序,自主分页
前端·javascript·elementui
行走的茶白26 分钟前
vue2+TS,el-table表格单选的写法
前端·javascript·vue.js
xiongxianhe38 分钟前
【SpringBoot Web框架实战教程(开源)】01 使用 pom 方式创建 SpringBoot 第一个项目
前端·spring boot·开源
diygwcom1 小时前
重磅更新-UniApp自定义字体可视化设计
前端·javascript·uni-app
大江东去浪淘尽千古风流人物1 小时前
【Python】第三方库的功能简介
开发语言·python
苏少朋1 小时前
ElementUI框架搭建及组件使用
前端·javascript·elementui