控制台:控制台藝術字 & 為控制台輸出增加樣式(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 -


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM