目錄
控制台打印騷操作
預備知識：console | MDN
- 可以直接搜
為js控制台定義樣式
自定義樣式
console.log 中可以通過 %c 表示 css 樣式
效果1
代碼1
// 打印頁面相關信息（代碼更新時間）
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;'
console.log(`%c Now Time : %c ${date} `, a, b)
效果2
代碼2
console.log('%c綠色文字帶下划線', 'color: #43bb88;font-size: 24px;font-weight: bold;text-decoration: underline;');
打印（輸出）圖片
效果圖
代碼
- 注意：
%c后面有個空格，padding的值可以換算下（通過把font-size設置為0，讓字體不占空間，不然空格也會撐出一個空間的）
console.log('%c ', 'padding:133px 184px; font-size: 0; background:url("https://picsum.photos/id/1/368/268"); no-repeat;')
借助平台打印字符（符號組成）
- 特別注意，有轉義字符自己處理一下
效果圖
代碼
var res = `
// 未處理轉義
// __ __ ____ _ __ __ __
// / / / /__ / / /___ | | / /___ _____/ /___/ /
// / /_/ / _ \/ / / __ \ | | /| / / __ \/ ___/ / __ /
// / __ / __/ / / /_/ / | |/ |/ / /_/ / / / / /_/ /
// /_/ /_/\___/_/_/\____/ |__/|__/\____/_/ /_/\__,_/
//
`
console.log(res)
var res = `
// 取消轉義后
// __ __ ____ _ __ __ __
// / / / /__ / / /___ | | / /___ _____/ /___/ /
// / /_/ / _ \\/ / / __ \\ | | /| / / __ \\/ ___/ / __ /
// / __ / __/ / / /_/ / | |/ |/ / /_/ / / / / /_/ /
// /_/ /_/\\___/_/_/\\____/ |__/|__/\\____/_/ /_/\\__,_/
//
`
console.log(res)
Lunicode 平台操作
①先把准備好的內容在 Lunicode 上輸入進行轉換（試試那些選項，生成自己想要的效果）
- 這個網站訪問稍微有點慢，響應也有點點慢，耐心等待吧，或者推薦下其他更快更好的網站
②把轉換后的結果復制到 js 代碼中，存起來，並處理掉轉義字符
- 特別是
\
③控制台輸出並控制顏色等樣式
圖片轉字符打印
- 百度搜一下，有很多工具（或者 python 也可以實現這個功能，網上也能搜到案例代碼）
- 圖片轉ASCII字符圖
將轉換后的字符復制到代碼里，處理掉轉義字符后js控制台輸出即可
控制台打印騷操作二
想要探索這個主要是怕以后工作做產品要打印類似這種的版權信息，提前學一手（或者自己寫demo也可以用來裝裝逼...）
- 下面這個就是我目前看到還不錯的打印效果，模仿一個（這就突然變得有意義了）
效果圖
代碼實現
素材：文本內容
🌒 Mars3D 三維地球平台軟件
版 本 號：2.1.0 【Cesium版本：1.71】
編譯日期：2020-7-26 19:39:39
版權聲明：
1. Mars3D版權完全屬於 "合肥火星科技有限公司".
2. Mars3D中mars3d.js程序包，任何個人和機構在遵守下列條件的前提下授權永久使用：
1）不進行任何形式的破解和裁剪，程序包完整引用
2）保留此版權信息在控制台輸出
我們保留對此版權信息的最終解釋權.
🏠官網: http://cesium.marsgis.cn
📞微信: http://marsgis.cn/weixin.html
錯誤案例
// 失敗的想法-錯誤案例，這樣並不好做
var resArr = [
`🌒 Mars3D 三維地球平台軟件`,
` `,
`版 本 號：2.1.0 【Cesium版本：1.71】`，
`編譯日期：2020-7-26 19:39:39 `,
`版權聲明：`,
`1. Mars3D版權完全屬於 "合肥火星科技有限公司".`,
`2. Mars3D中mars3d.js程序包，任何個人和機構在遵守下列條件的前提下授權永久使用：`,
` 1）不進行任何形式的破解和裁剪，程序包完整引用`,
` 2）保留此版權信息在控制台輸出`,
`我們保留對此版權信息的最終解釋權.`,
` `,
`🏠官網: http://cesium.marsgis.cn `,
`📞微信: http://marsgis.cn/weixin.html `
]
// 到這里蒙了，樣式怎么對應起來，並且每個 console.log 都自帶換行，顯然達不到想要的結果
var styleArr = [
``
]
for (var i in resArr) {
console.log('%c' + resArr[i], '')
}
方式一（感覺有點亂）
// 控制台版權申明案例
// 方式一
var content = `
版 本 號：2.1.0 【Cesium版本：1.71】
編譯日期：2020-7-26 19:39:39
版權聲明：
1. Mars3D版權完全屬於 "合肥火星科技有限公司".
2. Mars3D中mars3d.js程序包，任何個人和機構在遵守下列條件的前提下授權永久使用：
1）不進行任何形式的破解和裁剪，程序包完整引用
2）保留此版權信息在控制台輸出
我們保留對此版權信息的最終解釋權.
🏠官網: http://cesium.marsgis.cn
📞微信: http://marsgis.cn/weixin.html
`
console.log('%c🌒 Mars3D %c三維地球平台軟件\n' + '%c' + content, 'font-size: 20px; font-weight: 600; color: rgb(244,167,89);', 'font-style: oblique;font-size:14px;color: rgb(244,167,89); font-weight: 400;', 'color: rgb(30,152,255);')
方式二（改進版-最終版，比較貼近前端開發）
// 方式二
/* 樣式代碼 */
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);
`
/* 內容代碼 */
var title1 = '🌒 Mars3D '
var title2 = '三維地球平台軟件'
var content = `
版 本 號：2.1.0 【Cesium版本：1.71】
編譯日期：2020-7-26 19:39:39
版權聲明：
1. Mars3D版權完全屬於 "合肥火星科技有限公司".
2. Mars3D中mars3d.js程序包，任何個人和機構在遵守下列條件的前提下授權永久使用：
1）不進行任何形式的破解和裁剪，程序包完整引用
2）保留此版權信息在控制台輸出
我們保留對此版權信息的最終解釋權.
🏠官網: http://cesium.marsgis.cn
📞微信: http://marsgis.cn/weixin.html
`
console.log(`%c${title1} %c${title2}
%c${content}`, styleTitle1, styleTitle2, styleContent)
擴展版（更低耦合，推薦）
/* 樣式代碼 */
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);
`
/* 內容代碼 */
var title1 = '🌒 Mars3D '
var title2 = '三維地球平台軟件'
// => 讀取配置型（在配置文件里配置這些會變動的網址）
var offiUrl = 'http://cesium.marsgis.cn'
var content = `
版 本 號：2.1.0 【Cesium版本：1.71】
編譯日期：2020-7-26 19:39:39
版權聲明：
1. Mars3D版權完全屬於 "合肥火星科技有限公司".
2. Mars3D中mars3d.js程序包，任何個人和機構在遵守下列條件的前提下授權永久使用：
1）不進行任何形式的破解和裁剪，程序包完整引用
2）保留此版權信息在控制台輸出
我們保留對此版權信息的最終解釋權.
🏠官網: ${offiUrl}
📞微信: http://marsgis.cn/weixin.html
`
console.log(`%c${title1} %c${title2}
%c${content}`, styleTitle1, styleTitle2, styleContent)