L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Un guide simple / blogs / perficient
Dans le monde du développement Web, l’ajout d’éléments interactifs à une page Web peut le rendre plus attrayant et amusant pour les utilisateurs. Une telle fonctionnalité est un flipper de couleur – Un bouton qui modifie la couleur d’arrière-plan d’une page à chaque clic. Si vous cherchez à construire votre propre flipper de couleur simple, vous êtes au bon endroit! Dans cet article, nous explorerons une implémentation simple d’un flipper de couleur en utilisant Html, CSSet Javascrip.
Qu’est-ce qu’un flipper de couleur?
Un flipper de couleur est un petit outil interactif qui permet aux utilisateurs de modifier la couleur d’arrière-plan d’une page (ou d’un élément) chaque fois qu’ils cliquent sur un bouton. Pour cet exemple, nous donnerons aux utilisateurs deux modes: un qui traverse des noms de couleurs simples et un autre qui transforme les codes hexadécimaux de couleur. L’objectif est de rendre la page Web plus dynamique et visuellement intéressante!
Fonctionnalité de base:
Notre flipper couleur fonctionne en fournissant à l’utilisateur deux boutons:
- Mode simple – Flips à travers des noms de couleurs de base comme «rouge», «bleu» et «jaune».
- Mode hexagonal – Flips à travers les valeurs de couleur hexadécimale comme # FF5733, # 33FF57, etc.
Chaque fois que l’utilisateur clique sur le « Cliquez sur moi » Bouton, la couleur d’arrière-plan de la page se transforme en une couleur aléatoire à partir du mode sélectionné.
Explorer le code
Décomposons le code pour le flipper de couleur.
Étape 1: index.html (structure de la page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Welcome In My Color Flipper Page</title>
<link rel="stylesheet" href="https://blogs.perficient.com/2025/01/31/implementing-a-color-flipper-with-javascript-a-simple-guide/index.css" />
</head>
<body id="body">
<div class="header">
<div class="header-left_block page_title">Color Flipper</div>
<div class="header-right_block">
<button id="right-block_btn1" onclick="swap('simple')">Simple</button>
<button id="right-block_btn2" onclick="swap('hex')">Hex</button>
</div>
</div>
<div class="container">
<h2>Background Color: <span id="container-input_field"></span></h2>
<button id="container-flip_btn">Click Me</button>
</div>
<script src="index.js"></script>
</body>
</html>
- : Cela contient le titre de la page et deux boutons pour sélectionner le mode couleur (simple ou hex).: Cela contient le nom de couleur actuel ou la valeur hexagonale et le bouton «Cliquez sur moi» qui déclenche le changement de couleur.
Étape 2: index.css (styliser la page avec CSS)
Bien que ce didacticiel se concentre principalement sur les fonctionnalités, vous êtes encouragé à styliser la page en fonction de vos préférences pour améliorer à la fois sa conception et son expérience utilisateur globale.
Étape 3: index.js (logique javascript)
const simpleColor = ["honeydew","paleturquoise","hotpink","red","aliceblue","orange","yellow",]; const hexColor = ["#F0FFF0","#AFEEEE","#FF69B4","#FF0000","#F0F8FF","#FFA500","#FFFF00",]; let colorFlipper = []; let swapBtn1 = document.querySelector("#right-block_btn1"); let swapBtn2 = document.querySelector("#right-block_btn2"); let flipBtn = document.querySelector("#container-flip_btn"); let userOutput = document.querySelector("#container-input_field"); let swapbgColor = document.querySelector("#body"); let areEqual = false; const colorPicker = () => { let colorChoose = colorFlipper[Math.floor(Math.random() * colorFlipper.length)]; userOutput.innerHTML = colorChoose; userOutput.style.color = colorChoose; swapbgColor.style.backgroundColor = colorChoose; }; const flipRandomColor = () => { if (areEqual) { colorFlipper = simpleColor; colorPicker(); } else { colorFlipper = hexColor; colorPicker(); } }; const colorSwapping = () => { for (let i = 0; i <= colorFlipper.length; i++) { if (userOutput.innerHTML === colorFlipper[i]) { if (areEqual) { userOutput.innerHTML = simpleColor[i]; userOutput.style.color = simpleColor[i]; swapbgColor.style.backgroundColor = simpleColor[i]; } else { userOutput.innerHTML = hexColor[i]; userOutput.style.color = hexColor[i]; swapbgColor.style.backgroundColor = hexColor[i]; } } } }; flipRandomColor(); flipBtn.addEventListener("click", () => { flipRandomColor(); }); function swap(abc) { if ("simple" === abc) { areEqual = true; colorFlipper = hexColor; colorSwapping(); } else if ("hex" === abc) { areEqual = false; colorFlipper = simpleColor; colorSwapping(); } }Explication du code ci-dessus:
Tableaux de couleurs: Il y a deux tableaux: simplecolor et hexcolorequi contiennent respectivement des noms de couleurs simples et des codes de couleur hexadécimaux.
Picker de couleur aléatoire: Le ColorPicker () La fonction sélectionne au hasard une couleur dans le tableau de couleurs actif (SIMPLECOLOR ou HEXCOLOR) et l’applique à l’arrière-plan de la page Web et du texte affiché.
Commutation de mode: Le échanger() La fonction est déclenchée lorsque l’utilisateur clique sur l’un des boutons de mode («simple» ou «hex»). Cette fonction échange le tableau de couleurs actuel, permettant à l’utilisateur de basculer entre les couleurs simples et les codes hexagonaux.
Retour des couleurs: Lorsque le bouton «cliquez sur moi» est cliqué, le fliprandomcolor () La fonction est appelée, qui sélectionne au hasard une couleur dans le tableau actif et modifie l’arrière-plan en conséquence.
Mises à jour dynamiques: Chaque fois qu’une couleur est modifiée, le nom de couleur (ou la valeur hexagonale) est mis à jour sur la page Web afin que l’utilisateur puisse voir quelle couleur est actuellement utilisée.
Sortir:
Conclusion
Félicitations! Vous venez de construire un flipper de couleur simple et amusant en utilisant HTML, CSS et JavaScript. Maintenant, vous pouvez expérimenter en ajoutant plus de modes de couleur, d’animations ou d’autres fonctionnalités interactives pour la rendre encore plus excitante!
Source link