在本文中,我們將學習如何向文字添加顏色並在 JavaScript 的控制台視窗中列印它們。在原始的版本中,控制台中打印的所有數據都是黑色的,沒有其他顏色反映在控制台中,但在這裡我們將添加一些帶有文本的特殊字符,使我們的控制台窗口看起來更加豐富多彩。
有一些特殊程式碼可以幫助更改控制台視窗中輸出的顏色,這些程式碼稱為 ANSI 轉義程式碼。透過在 console.log() 方法中加入這些程式碼,我們可以在輸出中看到多種顏色。
所有顏色的特殊程式碼如下-
black = "\x1b[30m" red = "\x1b[31m" green = "\x1b[32m" yellow = "\x1b[33m" blue = "\x1b[34m" magenta = "\x1b[35m" cyan = "\x1b[36m" white = "\x1b[37m"
要實現在控制台視窗中新增彩色文字的任務,我們需要先建立一個對象,然後在對像中加入帶有顏色名稱及其代碼的鍵值對,即顏色名稱為鍵,顏色為顏色代碼作為特定鍵的值。新增鍵值對後,我們需要使用 for 迴圈列印這些鍵值對。
const color = {}; color.black ="\x1b[30m"; color.red = "\x1b[31m"; color.green = "\x1b[32m"; color.yellow = "\x1b[33m"; color.blue = "\x1b[34m"; color.magenta = "\x1b[35m"; color.cyan = "\x1b[36m"; color.white = "\x1b[37m"; for (var key in color){ console.log( color[key] + key); }
在下面的範例中,我們在控制台中列印彩色文字。請先開啟控制台,然後再按一下「彩色文字」按鈕。
<!DOCTYPE html> <html> <body> <center> <h1> JavaScript console colored text </h1> <p> Please open the <b>Console</b> to see the colored text. </h4> <p> Click "Colored Text" to display colored text in the Console.</p> <button onclick="colorFunc()">Colored Text</button> </center> <script> function colorFunc() { const color = {}; // Assigning the key: value pair to an object color.black = "\x1b[30m"; color.red = "\x1b[31m"; color.green = "\x1b[32m"; color.yellow = "\x1b[33m"; color.blue = "\x1b[34m"; color.magenta = "\x1b[35m"; color.cyan = "\x1b[36m"; color.white = "\x1b[37m"; // To print the key-value pairs of the object for (var key in color) { console.log(color[key] + key); } } </script> </body> </html>
在這裡您可以看到,在 for 循環中,我們首先列印了值,然後列印了鍵,因為要列印彩色文本,您必須將顏色代碼放在實際文本之前。
注意 - 我們有文字的顏色代碼,類似地,我們有背景文字的顏色代碼,如果我們想要控制台視窗中的彩色背景,我們可以使用它們。背景顏色的顏色代碼如下 -
bgBlack = "\x1b[40m" bgRed = "\x1b[41m" bgGreen = "\x1b[42m" bgYellow = "\x1b[43m" bgBlue = "\x1b[44m" bgMagenta = "\x1b[45m" bgCyan = "\x1b[46m" bgWhite = "\x1b[47m"
在下面的範例中,我們在控制台中設定文字背景顏色。在執行程式之前,請確保您已開啟控制台。
<!DOCTYPE html> <html> <body> <center> <h2> JavaScript console colored text background </h2> <p> Please open the <b>"Console"</b> to see the colored text background. </p> <p> Click "Colored Text" to display colored text background in the Console.</p> <button onclick="colorFunc()">Colored Text</button> </center> <script> function colorFunc() { const color = {}; // Assigning the key: value pair to an object color.bgBlack = "\x1b[40m" color.bgRed = "\x1b[41m" color.bgGreen = "\x1b[42m" color.bgYellow = "\x1b[43m" color.bgBlue = "\x1b[44m" color.bgMagenta = "\x1b[45m" color.bgCyan = "\x1b[46m" color.bgWhite = "\x1b[47m" // To print the key-value pairs of the object for (var key in color) { console.log(color[key] + key); } } colorFunc() </script> </body> </html>
以上是如何使用 JavaScript 在控制台中列印彩色文字?的詳細內容。更多資訊請關注PHP中文網其他相關文章!