[javascript] faire défiler des couleurs

Fermé
sittingbull Messages postés 14 Date d'inscription mardi 25 juillet 2006 Statut Membre Dernière intervention 2 octobre 2009 - 26 juil. 2006 à 17:01
sittingbull Messages postés 14 Date d'inscription mardi 25 juillet 2006 Statut Membre Dernière intervention 2 octobre 2009 - 28 juil. 2006 à 15:56
Salut à tous !
J'ai trouvé un script pour mon site et quand je l'affiche dans le navigateur, j'ai une page blanche. Pourtant je ne constate pas d'erreur de syntaxe. Merci pour votre aide SB

<script>
couleurs = new Array();
couleurs[1] = "000000";
couleurs[2] = "111111";
couleurs[3] = "222222";
couleurs[4] = "333333";
couleurs[5] = "444444";
couleurs[6] = "555555";
couleurs[7] = "666666";
couleurs[8] = "777777";
couleurs[9] = "888888";
couleurs[10] = "999999";
couleurs[11] = "AAAAAA";
couleurs[12] = "BBBBBB";
couleurs[13] = "CCCCCC";
couleurs[14] = "DDDDDD";
couleurs[15] = "EEEEEE";
couleurs[16] = "FFFFFF";

compteur = 1;
function degrade() {
document.bgColor = couleurs[compteur++];
if (compteur < couleurs.length)
setTimeout('degrade()', 50);
}
<script/>

3 réponses

kilian Messages postés 8731 Date d'inscription vendredi 19 septembre 2003 Statut Modérateur Dernière intervention 20 août 2016 1 527
27 juil. 2006 à 03:29
Salut,

Tu as une page blanche car la fonction dégradé est définie mais pas appelée.
Donc à la fin du script il faut encore rajouter:
degrade()

De même, la balise script à la fin est fermée du mauvais côté.

J'ai testé le dégradé et c'est pas mal mais ça manque de fluidité. Il passe par 16 couleurs.
Si ça te dit, je me suis inspiré de ce script pour en faire un autre configurable. Ca te permet d'avoir un dégradé (toujours noir et blanc) mais en passant par le nombre de couleur que tu veux (dans les puissances de 2) : 256, 128, 64, 32 etc...
Et là, la fluidité est au rendrez vous....
<script language="javascript">

/*Configuration */

config=new Array();

/*Cette option change le nombre de couleurs qui seront traversées 
  dans le dégradé. Le nombre de couleurs qui passeront dans le dégradé
  sera 255/config["intervalle_couleurs"]. Si tu mets 1, 255 couleurs passeront, 
  si tu mets 2, 127 couleurs passeront etc.... Plus il y a de couleurs
  et plus ce sera fluide mais lent. Par défaut je mets 2: un bon compromis */

config["intervalle_couleurs"] = 2;

/* Cette option règle l'intervalle de temps (em millisecondes) entre 
   chaque changement de couleur de l'arrière plan. Par défaut: 10 */

config["intervalle_temps"] = 10;

/* Début du script */


couleur=0;
intervalle_couleurs=0;


/* Configure l'intervalle de couleur. Si config["intervalle_couleurs"] est à 1,
   alors la couleur sera incrémentée de 0x010101 àchaque dégradé. 
   Si config["intervalle_couleurs"] est à 2, alors la couleur sera 
   incrémentée de 0x020202 à chaque dégradé. */
function configure()
{
	intervalle_couleurs = config["intervalle_couleurs"] + (config["intervalle_couleurs"] << 8) + (config["intervalle_couleurs"] << 16);

}

/* document.bgColor doit prendre une valeur hexa sous forme de chaine 
   de caractère avec 6 chiffres hexa. Si notre couleur comprend moins de 6
   chiffres, on rajoute des zero devant */
function padding(nombre)
{
	
	padded_str="";
	nombre=nombre.toString(16);
	if(nombre.length < 6){
		for (i=0;i< (6-nombre.length);i++)
		{
			padded_str+="0";
		}
		padded_str+=nombre;
	}
	else{
		padded_str=nombre;
	}
	return padded_str;
}

// Le dégradé
function degrade()
{
	document.bgColor=padding(couleur);
	if (couleur < 0xffffff){
		setTimeout("degrade()",config["intervalle_temps"]);
	}
	// N'allons pas trop loin dans l'incrémentation
	if ( (couleur + intervalle_couleurs) >= 0xffffff){
		couleur = 0xffffff;
	}
	else{
		couleur+=intervalle_couleurs;
	}
	
}
configure();
degrade();
</script>
0
sittingbull Messages postés 14 Date d'inscription mardi 25 juillet 2006 Statut Membre Dernière intervention 2 octobre 2009
27 juil. 2006 à 10:42
Salut Kilian !

Merci pour ta réponse si rapide. Je débute en JS et j'ai des difficultés pour comprendre pourquio ça ne marche pas. Je vais corriger mon erreur et voir si ça marche. SB
0
sittingbull Messages postés 14 Date d'inscription mardi 25 juillet 2006 Statut Membre Dernière intervention 2 octobre 2009
27 juil. 2006 à 12:55
Désolé mais ça ne marche pas !
Donc je préfère que vous me disiez si le script tout simple suivant est correct car même celui-ci , il ne marche pas sur mon ordi !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>degrade</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script>
couleurs = new Array();
couleurs[1] = "003300";
couleurs[2] = "006600";
couleurs[3] = "009900";
couleurs[4] = "00CC00";
couleurs[5] = "00FF00";
couleurs[6] = "330000";
couleurs[7] = "333300";
couleurs[8] = "336600";
couleurs[9] = "339900";
couleurs[10] = "33CC00";
couleurs[11] = "33FF00";
couleurs[12] = "660000";
couleurs[13] = "663300";
couleurs[14] = "666600";
couleurs[15] = "669900";
couleurs[16] = "00FF00";

function degrade() {
for (compteur = 0; compteur < couleurs.length; compteur ++) {
document.bgColor = couleurs[compteur];
}
}
degrade();
</script>
</head>
<body>
</body>
</html>

Autres questions : a-t-on besoin d'être connecté pour que ça marche ? L'appel de fonction doit-il être obligatoirement dans body ?
Quand je mets l'appel de la fonction dans body, le navigateur m'affiche cette fonction.
Merci d'avance pour votre réponse SB
0
kilian Messages postés 8731 Date d'inscription vendredi 19 septembre 2003 Statut Modérateur Dernière intervention 20 août 2016 1 527 > sittingbull Messages postés 14 Date d'inscription mardi 25 juillet 2006 Statut Membre Dernière intervention 2 octobre 2009
28 juil. 2006 à 01:03
Ce dernier script n'est pas correct car il n'utilise pas la fonction setTimeout() (qui permet d'executer une fonction à un intervalle de temps).
Donc le dégradé se fait, mais tellement rapidement que c'est invisible à l'oeil nu.
De même vu que tu as mis l'appel de la fonction dans le head, je ne sais pas si c'est valable.

Autres questions : a-t-on besoin d'être connecté pour que ça marche ?

Si ta page est hebergée sur internet, oui, il faut bien la charger. Mais tu peux mettre ça dans une page html sur ton disque dur et l'ouvrir avec ton navigateur.

L'appel de fonction doit-il être obligatoirement dans body ?

Si tu executes ta fonction entre les balises head, à priori la fonction s'execute alors que le body n'existe pas encore, donc ça risque de poser des problèmes. A tester.

Quand je mets l'appel de la fonction dans body, le navigateur m'affiche cette fonction.

L'appel de la fonction c'est du javascript. Et le javascript doit toujours être compris entre les balises
<script language="javascript">
..............
</script>
0
kilian Messages postés 8731 Date d'inscription vendredi 19 septembre 2003 Statut Modérateur Dernière intervention 20 août 2016 1 527 > sittingbull Messages postés 14 Date d'inscription mardi 25 juillet 2006 Statut Membre Dernière intervention 2 octobre 2009
28 juil. 2006 à 01:11
Désolé mais ça ne marche pas !

Concernant le script que je t'ai fait.
Je l'ai testé sous Internet Explorer 5 et Mozilla Firefox 1.5

Et je n'ai aucun soucis. Donc tu l'as peut être mal copié/collé, ou bien tu as rajouté des trucs sur la page qui provoquent une erreur.
0
sittingbull Messages postés 14 Date d'inscription mardi 25 juillet 2006 Statut Membre Dernière intervention 2 octobre 2009
28 juil. 2006 à 13:29
Ok merci Kilian pour tes explications bien détaillées. Je vais essayer de nouveau. L'essentiel, c'est de ne pas se décourager ! merci encore Sb
0
sittingbull Messages postés 14 Date d'inscription mardi 25 juillet 2006 Statut Membre Dernière intervention 2 octobre 2009
28 juil. 2006 à 15:56
Ouf ! Enfin ça marche en effet avec time out dans le petit script mais c'est du noir et blanc. Je suppose qu'il faut changer les hexa pour avoir de la couleur. Maintenant je vais essayer de faire marcher ton script car effectivement, c'est pas très fluide. SittingBull
0