ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使用してコンソールに色付きのテキストを印刷するにはどうすればよいですか?
JavaScriptを使用してコンソールに色付きのテキストを印刷するにはどうすればよいですか?
- WBOY転載
- 2023-09-24 16:09:051545ブラウズ
この記事では、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"
Example
コンソールでテキストの背景色を設定する
次の例では、コンソールでテキストの背景色を設定します。プログラムを実行する前に、コンソールが開いていることを確認してください。
えええええ以上がJavaScriptを使用してコンソールに色付きのテキストを印刷するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。