Bagaimana untuk mencetak teks berwarna dalam konsol menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk mencetak teks berwarna dalam konsol menggunakan JavaScript?

WBOY

Lepaskan： 2023-09-24 16:09:05

ke hadapan

1549 orang telah melayarinya

如何使用 JavaScript 在控制台中打印彩色文本？

Dalam artikel ini, kita akan belajar cara menambah warna pada teks dan mencetaknya dalam tetingkap konsol dalam JavaScript. Dalam versi asal, semua data yang dicetak dalam konsol adalah hitam dan tiada warna lain ditunjukkan dalam konsol, tetapi di sini kami akan menambah beberapa aksara khas dengan teks untuk menjadikan tetingkap konsol kami kelihatan lebih berwarna .

Terdapat kod khas yang boleh membantu menukar warna output dalam tetingkap konsol, kod ini dipanggil kod melarikan diri ANSI. Dengan menambahkan kod ini dalam kaedah console.log(), kita boleh melihat berbilang warna dalam output.

Kod khas untuk semua warna adalah seperti berikut-

black = "\x1b[30m"
red = "\x1b[31m"
green = "\x1b[32m"
yellow = "\x1b[33m"
blue = "\x1b[34m"
magenta = "\x1b[35m"
cyan = "\x1b[36m"
white = "\x1b[37m"

Salin selepas log masuk

Untuk mencapai tugas menambah teks berwarna pada tetingkap konsol, kita perlu mencipta objek dahulu, dan kemudian tambah objek dengan Sepasang nilai kunci nama warna dan kodnya, iaitu nama warna ialah kunci dan warna ialah kod warna sebagai nilai untuk kunci tertentu. Selepas menambah pasangan nilai kunci, kita perlu mencetak pasangan nilai kunci ini menggunakan gelung untuk.

Syntax

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

Salin selepas log masuk

Contoh

Cetak teks berwarna dalam konsol

#🎜🎜, kami#dalam contoh di bawah mengawal Cetak teks warna di Taichung. Sila buka

Console dahulu, kemudian klik butang "Teks Berwarna" .

<!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>

Salin selepas log masuk

Di sini anda boleh melihat bahawa dalam gelung for kami mencetak nilai dahulu dan kemudian kekunci kerana untuk mencetak teks berwarna anda perlu meletakkan kod warna sebelum teks sebenar.

NOTA - Kami mempunyai kod warna untuk teks, begitu juga kami mempunyai kod warna untuk teks latar belakang, jika kami mahu latar belakang berwarna dalam tetingkap konsol kami boleh Gunakan mereka. Kod warna untuk warna latar belakang adalah seperti berikut -

bgBlack = "\x1b[40m"
bgRed = "\x1b[41m"
bgGreen = "\x1b[42m"
bgYellow = "\x1b[43m"
bgBlue = "\x1b[44m"
bgMagenta = "\x1b[45m"
bgCyan = "\x1b[46m"
bgWhite = "\x1b[47m"

Salin selepas log masuk

Contoh

Tetapkan warna latar belakang teks dalam konsol

Dalam contoh di bawah, kita berada dalam konsol Tetapkan warna latar belakang teks. Sebelum melaksanakan program, sila pastikan anda telah membuka

Console.

<!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>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk mencetak teks berwarna dalam konsol menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!