Comment imprimer du texte coloré dans la console en utilisant JavaScript ?-js tutoriel-php.cn

Comment imprimer du texte coloré dans la console en utilisant JavaScript ?

WBOY

Libérer： 2023-09-24 16:09:05

avant

1609 Les gens l'ont consulté

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

Dans cet article, nous apprendrons comment ajouter des couleurs au texte et les imprimer dans la fenêtre de la console en JavaScript. Dans la version originale, toutes les données imprimées dans la console étaient noires et aucune autre couleur n'était reflétée dans la console, mais ici nous ajouterons quelques caractères spéciaux avec du texte pour rendre la fenêtre de notre console plus colorée.

Il existe des codes spéciaux qui peuvent aider à changer la couleur de la sortie dans la fenêtre de la console, ces codes sont appelés codes d'échappement ANSI. En ajoutant ces codes dans la méthode console.log(), nous pouvons voir plusieurs couleurs dans la sortie.

Les codes spéciaux pour toutes les couleurs sont les suivants -

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

Copier après la connexion

Pour réaliser la tâche d'ajout de texte coloré à la fenêtre de la console, nous devons d'abord créer un objet, puis ajouter une paire clé-valeur avec le nom de la couleur et son code dans l'objet, c'est-à-dire la couleur. Le nom est la clé et la couleur est le code couleur comme valeur de la clé spécifique. Après avoir ajouté les paires clé-valeur, nous devons imprimer ces paires clé-valeur à l'aide d'une boucle for.

Syntaxe

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

Copier après la connexion

Exemple

Imprimer du texte en couleur dans la console

Dans l'exemple ci-dessous, nous imprimons du texte en couleur dans la console. Veuillez d'abord ouvrir la Console, puis cliquez sur le bouton "Texte coloré".

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

Copier après la connexion

Ici, vous pouvez voir que dans la boucle for, nous avons d'abord imprimé la valeur, puis la clé, car pour imprimer du texte en couleur, vous devez mettre le code couleur avant le texte lui-même.

NOTE - Nous avons le code couleur pour le texte, de même nous avons le code couleur pour le texte d'arrière-plan, nous pouvons les utiliser si nous voulons un fond coloré dans la fenêtre de la console. Le code de couleur pour la couleur d'arrière-plan est le suivant -

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

Copier après la connexion

Exemple

Définir la couleur d'arrière-plan du texte dans la console

Dans l'exemple ci-dessous, nous définissons la couleur d'arrière-plan du texte dans la console. Avant d'exécuter le programme, assurez-vous que la Console est ouverte.

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!