Comment créer un sélecteur de couleurs en HTML avec jQuery

Posté Par: Windows2022tutosur: décembre 21, 2022Dans: TechPas De Commentaires

Comment créer un sélecteur de couleurs en HTML avec jQuery

Dans ce tutoriel, nous allons créer un Comment créer un sélecteur de couleurs en HTML à l’aide de jQuery. Ce tutoriel a pour but de vous donner un moyen de changer dynamiquement la couleur de votre arrière-plan. Cela reprendra à fond les éléments de base de la création de l’application de sélection de couleurs à l’aide de jQuery . Je vais fournir un exemple de programme pour montrer le codage réel de ce tutoriel. Faisons donc le codage.

Avant de commencer :

Vous devez d’abord télécharger le jQuery brancher.

Voici le lien pour le jQuery que j’ai utilisé dans ce tutoriel https://jquery.com/.

Enfin, voici le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.

Création de l’interface

C’est ici que nous allons créer une interface simple pour notre application. Ce code n’affichera que l’interface des formulaires d’arrière-plan et html. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.

<!DOCTYPE html>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" />
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-header">
				<a href=" class="navbar-brand">Sourcecodester</a>
		<div class="col-md-6 well">
			<h3 class="text-primary">How to Create Color Picker in HTML</h3>
			<hr style="border-top:1px dotted #000;"/>
					<div class="form-inline" style="text-align:center;">
						<input type="number" class="form-control" value="0" min="0" max="255" size="4" id="txt_red"  />
						<input type="number" class="form-control" value="0" min="0" max="255" size="4" id="txt_green"  />
						<input type="number" class="form-control" value="0" min="0" max="255" size="4" id="txt_blue"  />
				<div class="col-md-12" style="border:1px solid #000; height:250px; transition: background 100ms;" id="result"></div>
				<br style="clear:both;"/>

Création d’une fonction JavaScript

C’est là que se trouve la fonction principale de l’application. Ce code vous permettra de calibrer dynamiquement la couleur du fond. Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.

$(document).ready(function(){
	$input_text = $('input[type="number"]');
	$input_text.change(function(){
		$txt_red = $('#txt_red').val();
		$('#red').val($txt_red);
		$txt_green = $('#txt_green').val();
		$('#green').val($txt_green);
		$txt_blue = $('#txt_blue').val();
		$('#blue').val($txt_blue);
		$('#result').css('background', 'rgb(' + $txt_red +', ' + $txt_green + ', ' + $txt_blue + ')');
		$rgb = 'rgb(' + $txt_red + ', ' + $txt_green + ', ' + $txt_blue + ')';
		$hex = rgb2hex();
		$('#hex').val($hex);
	});
});

Dans le code donné, nous appelons d’abord l’événement de base jQuery ready pour signaler que le DOM de la page est maintenant prêt à être utilisé. Et puis nous lions toutes les zones de texte en utilisant la méthode jQuery et utilisons le monnaie() fonction, cette fonction peut vous permettre de manipuler un élément lorsqu’un élément lié a été modifié. Pour changer la couleur d’arrière-plan, nous ajoutons simplement la valeur des zones de texte dans la valeur de couleur css.

Production:

Le Comment créer un sélecteur de couleurs en HTML à l’aide de jQuery le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.

Voilà, nous avons créé avec succès Comment créer un sélecteur de couleurs en HTML à l’aide de jQuery. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !

Plus de tutoriels pour le langage JavaScript

Tutoriels JavaScript

Télécharger ici