普歌-碼上鴻鹄團隊:前端項目控制台(F12)列印出帶樣式的文字、圖檔(像百度一下一樣)

普歌-碼上鴻鹄團隊:控制台列印各種資訊(圖檔、文字)

前言:我們再通路百度時，懂行的人都會調出控制台來，我們發現百度控制台有一個鼓勵的話，像這樣，這次我來實作一下這樣的效果

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
);

           

效果圖:

最後學到的小夥伴給個三連,點贊、關注、收藏哦

更多推薦：wantLG的《普歌-碼上鴻鹄團隊:element ui中實作upload檔案、圖檔上傳功能(el-upload))》

• 作者：wantLG
• 本文源自：wantLG的《普歌-碼上鴻鹄團隊:前端項目控制台(F12)列印出帶樣式的文字、圖檔(像百度一下一樣)》
• 本文版權歸作者和CSDN共有，歡迎轉載，且在文章頁面明顯位置給出原文連結，未經作者同意必須保留此段聲明，否則保留追究法律責任的權利。