0%

玩转console

5分钟教你玩转console

如何打印出带css样式的信息呢?

1
2
3
4
/* 基础写法,使用%c即可,可以写在任何地方,然后在后面添加我们的样式。 */
console.log("%cA %cB %cC","color:red;","color:green;","color:blue;");
/* 所以在这里我们打印的内容A为红色的,B为绿色的,C为蓝色的。 */
/* 更多样式自行探索哦。 */

打印图片(部分浏览器不兼容)

  console.log不支持直接图片输出,但我们可以用背景图曲线救国。但你没法像平时那样输出背景图,原因呢,就是你没法直接设置 width 和 height 样式。所以我们要要输出一张 300x200 的图片的话,要用 padding 来把整个区域撑开到我们需要的大小,然后还要设置 line-height 才行。

注意:

  • line-height的值为图片高度。
  • background设置图片url。
  • padding左右两边的值是图片宽度的一半。
  • padding上下的值,需要自己慢慢去尝试直到满足为止。
1
console.log("%c","line-height:200px;background:url(...);padding:150px 自定义;");

博主案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* console */
console.log("%c博客名称%cDoubleAm", "line-height:28px;padding:4px;background:#a1afc9;color:#000;font-size:16px;margin-right:15px", "color:#3fa9f5;line-height:28px;font-size:16px;");
console.log("%c网站地址%chttps://hexiongbiao.cn", "line-height:28px;padding:4px;background:#a1afc9;color:#000;font-size:16px;margin-right:15px", "color:#00bc12;line-height:28px;font-size:16px;");
console.log("%c扣扣号码%c1005760694", "line-height:28px;padding:4px;background:#a1afc9;color:#000;font-size:16px;margin-right:15px", "color:#ff9900;line-height:28px;font-size:16px;");
console.log("%c欢迎使用doublelove!", "line-height:28px;padding:5px;color:#fff;font-weight:bolder;font-size:16px;background-color:chocolate;color:#fff;");
if (window.console && window.console.log) {
console.log(`%c页面加载消耗了 %c${(Math.round(100 * performance.now()) / 100 / 1e3).toFixed(2)}s`, "background: #fff;color: #333;text-shadow: 0 0 2px #eee, 0 0 3px #eee, 0 0 3px #eee, 0 0 2px #eee, 0 0 3px #eee;", "color:tomato;font-weight:bolder;");
localStorage.getItem("access") || localStorage.setItem("access", (new Date).getTime());
let e = new Date(parseInt(localStorage.getItem("access")));
let o = `${e.getFullYear()}${e.getMonth() + 1}${e.getDate()}日`;
let t = 0;
localStorage.getItem("hit") ? t = parseInt(localStorage.getItem("hit")) : localStorage.setItem("hit", 0);
localStorage.setItem("hit", ++t);
console.log(`%c这是你自 %c${o} %c以来第 %c${t} %c次在本站打开控制台,你想知道什么秘密吗~`, "", "color:chocolate;font-weight:bolder;", "", "color:chocolate;font-weight:bolder;", "");
}
bulb