前端项目控制台(F12)打印出带样式的文字、图片(像百度一下一样)

wantLG

已于 2023-10-08 17:53:04 修改

阅读量1.1k

点赞数 3

分类专栏： web前端 vue实战文章标签： js html css vue.js

于 2020-09-06 21:36:41 首次发布

本文链接：https://blog.csdn.net/weixin_45491473/article/details/108435705

版权

vue实战同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

web前端

21 篇文章 1 订阅

订阅专栏

控制台打印各种信息(图片、文字)

前言:我们再访问百度时，懂行的人都会调出控制台来，我们发现百度控制台有一个鼓励的话，像这样，这次我来实现一下这样的效果

1.先来看看最终实现的效果

代码实现效果

以上这就是我们最终要实现的样式,接下来说说具体怎么写

2. 先实现一个有颜色文字并带下划线的

逗号前放的是显示的文本,后面是样式
注意在写这类代码,不管是打印样式文字，还是图片都要在前面加%c,

  console.log(
       "%c橙色文字带下划线",
       "color: #ff6700;font-size: 24px;font-weight: bold;text-decoration: underline;"
  );

效果图

3. 实现打印图片

注意%c的写法

打印图片:%c 后面有个空格，padding的值可以换算下（通过把font-size设置为0，让字体不占空间，不然空格也会撑出一个空间的）

   //注意%c后有一位空格
    console.log(
        "%c ",
        'padding:133px 184px; font-size: 0; background:url("https://picsum.photos/id/1/368/268"); no-repeat;'
      );

效果图

4. 打印页面相关信息（更新时间）

我们还可以利用变量+模板字符串(反引号)来实现，更便捷

let date = new Date();
//把样式赋给变量
let a = "background: #606060; color: #fff; border-radius: 3px 0 0 3px;";
let b = "background: #1475B2; color: #fff; border-radius: 0 3px 3px 0;";
//通过模板拼接date,第一个样式a对应第一个%c，第二个样式b对应第二个%c，一一对应
console.log(`%c Now Time : %c ${date} `, a, b);

效果图

5. 实现最终需要的打印信息

实现hello 要用到ascll art，推荐一个转化这个的网站：转化ASCLL ART，这里能把想要的英文变为字符图形形式;
注意:从网站复制过来后，要转义一下，不然打印不出来你想要的效果(转义:把所有的单斜杠替换成双斜杠 \->\\)
项目中如果需要的话就把代码引入到一个全局的js文件就可以

//用模版字符串
var hello = `
    __  __     ____         ____                  _            
   / / / ___  / / ____     / __ \\___  ____  _____(_____  ____ _
  / /_/ / _ \\/ / / __ \\   / /_/ / _ \\/ __ \\/ ___/ / __ \\/ __  /
 / __  /  __/ / / /_/ /  / ____/  __/ /_/ (__  / / / / / /_/ / 
/_/ /_/\\___/_/_/\\____/  /_/    \\___/\\____/____/_/_/ /_/\\__, /  
                                                      /____/                                             
`;
console.log(hello);
//样式变量
var styleTitle1 = ` font-size: 20px; font-weight: 600; color: rgb(244,167,89); `;
var styleTitle2 = ` font-style: oblique; font-size:14px; color: rgb(244,167,89); font-weight: 400; `;
var styleContent = ` color:rgb(30,152,255);margin-top:15px `;
/* 内容代码 */
var title1 = "普歌Peosing";
var title2 = "打造趣味学习生态";
//用模版字符串
var content = `
普歌致言:
任何没有走心的努力，都只是在表演。
真正的努力不是做给别人看，而是用专注和热情持续浇灌。
说自己做到的,做自己说过的。
因为梦想，所以选择远方；因为无所依靠，所以选择坚强。
欢迎来到普歌！
`;
//最终打印，对应好相关的样式,一个样式对应一个%c
console.log(
  `%c${title1} %c${title2} %c${content}`,
  styleTitle1,
  styleTitle2,
  styleContent
);