Défilement des couleurs du bg en javascript

Résolu
ruvele Messages postés 18 Date d'inscription   Statut Membre Dernière intervention   -  
ruvele Messages postés 18 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

j'aimerais que mon background change de couleur tout seul... pour cela j'ai crée plusieurs chosesen javascript mais cela bug... pour que ça fonctionne je suis obligée de cliquer sur start puis stop puis start...

voici le code : 

<!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>Pulse</title>
	
	<script language="JavaScript">
	<!--
	
	var tabl_couleurs = new Array();
	tabl_couleurs[0] = "#OOOOOO";
	tabl_couleurs[1] = "#111111";
	tabl_couleurs[2] = "#222222";
	tabl_couleurs[3] = "#333333";
	tabl_couleurs[4] = "#444444";
	tabl_couleurs[5] = "#555555";
	tabl_couleurs[6] = "#666666";
	tabl_couleurs[7] = "#777777";
	tabl_couleurs[8] = "#888888";
	tabl_couleurs[9] = "#999999";
	tabl_couleurs[10] = "#AAAAAA";
	tabl_couleurs[11] = "#BBBBBB";
	tabl_couleurs[12] = "#CCCCCC";
	tabl_couleurs[13] = "#DDDDDD";
	tabl_couleurs[14] = "#EEEEEE";
	tabl_couleurs[15] = "#FFFFFF";
	
	var i = 0;
	var dir = "up";
	var proc;
	
	function start() {
		if (proc == "up") {
				proc = window.setInterval('change_bg()', 100);	
			}
	}
	
	function stop() {
		window.clearInterval(proc);
			proc = "up";
	}
	
	function change_bg() {
		document.bgColor=tabl_couleurs
		[Math.floor(Math.random()*tabl_couleurs.length)]
	
	}
	
	//-->
	</script>
	
</head>

<body>

<a href="javascript:start();">Start</a> 
<br/>
<a href="javascript:stop();">Stop</a>

</body>
</html>


Est ce que quelqu'un a une idée ?

Merci d'avance pour votre aide
A voir également:

2 réponses

Réponse 1 / 2
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
SALUT

essaye ca 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head><script>


///////////////////////////////////////////////////////////////////////////
// CONFIGURATION DEBUT
///////////////////////////////////////////////////////////////////////////

// LA TU METS TES COULEURS 3 MINI
var colors=new Array("#FFFF00","#00FFFF","#5fc700","#854b00","#76e07c","#FFAC00","#FFFF66","#ff0000","#FFFFFF","#850044","#B56AFF","#56B1FF")

//PAUSE ENTRE LES CHANGEMENTS EN SECONDES
var pausebetweencolors=2

// EFFET DE DEGRADE seulement sur IE
var gradient_effect="horizontal"

//VITESSE 
var speed=20

//NOMBRE DE LOOP
var i_loopmax=1000

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION FIN
///////////////////////////////////////////////////////////////////////////

// NE RIEN CHANGER EN DESSOUS
var pausesteps=40
var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')
var redcol_1
var redcol_2 
var redcol_1_b
var redcol_2_b 
var greencol_1 
var greencol_2 
var greencol_1_b 
var greencol_2_b
var bluecol_1 
var bluecol_2 
var bluecol_1_b 
var bluecol_2_b
 
var rgbredfrom
var rgbgreenfrom
var rgbbluefrom
var rgbredto
var rgbgreento
var rgbblueto
var rgbrednow
var rgbgreennow
var rgbbluenow

var rgbredfrom_b
var rgbgreenfrom_b
var rgbbluefrom_b
var rgbredto_b
var rgbgreento_b
var rgbblueto_b
var rgbrednow_b
var rgbgreennow_b
var rgbbluenow_b

var colorhexafrom
var colorhexato

var i_step=1
var i_loop=0
var i_colorsA=0
var i_colorsB=1
var i_colorsC=1
var i_colorsD=2

pausebetweencolors*=1000

var browserinfos=navigator.userAgent 
var ie4=document.all&&!document.getElementById
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)  
var browserok=ie4||ie5||ns4||ns6||opera

function translateintorgb() {

	var hexa=colors[i_colorsA]
	var hexared=hexa.substring(1,3)
	var hexagreen=hexa.substring(3,5)
	var hexablue=hexa.substring(5,7)
	rgbredfrom=parseInt("0x"+hexared)
	rgbgreenfrom=parseInt("0x"+hexagreen)
	rgbbluefrom=parseInt("0x"+hexablue)
	rgbrednow=rgbredfrom
	rgbgreennow=rgbgreenfrom
	rgbbluenow=rgbbluefrom
	
	var hexa=colors[i_colorsB]
	var hexared=hexa.substring(1,3)
	var hexagreen=hexa.substring(3,5)
	var hexablue=hexa.substring(5,7)
	rgbredto=parseInt("0x"+hexared)
	rgbgreento=parseInt("0x"+hexagreen)
	rgbblueto=parseInt("0x"+hexablue)
	
	var hexa=colors[i_colorsC]
	var hexared=hexa.substring(1,3)
	var hexagreen=hexa.substring(3,5)
	var hexablue=hexa.substring(5,7)
	rgbredfrom_b=parseInt("0x"+hexared)
	rgbgreenfrom_b=parseInt("0x"+hexagreen)
	rgbbluefrom_b=parseInt("0x"+hexablue)
	rgbrednow_b=rgbredfrom_b
	rgbgreennow_b=rgbgreenfrom_b
	rgbbluenow_b=rgbbluefrom_b
	
	var hexa=colors[i_colorsD]
	var hexared=hexa.substring(1,3)
	var hexagreen=hexa.substring(3,5)
	var hexablue=hexa.substring(5,7)
	rgbredto_b=parseInt("0x"+hexared)
	rgbgreento_b=parseInt("0x"+hexagreen)
	rgbblueto_b=parseInt("0x"+hexablue)
	i_colorsA++
	i_colorsB++
	i_colorsC++
	i_colorsD++
	if (i_colorsA>=colors.length) {i_colorsA=0}
	if (i_colorsB>=colors.length) {i_colorsB=0}
	if (i_colorsC>=colors.length) {i_colorsC=0}
	if (i_colorsD>=colors.length) {i_colorsD=0}
	
	changefromto()
}

function changefromto() {
	rgbrednow=rgbrednow-((rgbredfrom-rgbredto)/speed)
	rgbgreennow=rgbgreennow-((rgbgreenfrom-rgbgreento)/speed)
	rgbbluenow=rgbbluenow-((rgbbluefrom-rgbblueto)/speed)
	
	rgbrednow_b=rgbrednow_b-((rgbredfrom_b-rgbredto_b)/speed)
	rgbgreennow_b=rgbgreennow_b-((rgbgreenfrom_b-rgbgreento_b)/speed)
	rgbbluenow_b=rgbbluenow_b-((rgbbluefrom_b-rgbblueto_b)/speed)
	
	if (rgbrednow>255) {rgbrednow=255}
	if (rgbrednow<0) {rgbrednow=0}
	if (rgbgreennow>255) {rgbgreennow=255}
	if (rgbgreennow<0) {rgbgreennow=0}
	if (rgbbluenow>255) {rgbbluenow=255}
	if (rgbbluenow<0) {rgbbluenow=0}
	
	if (rgbrednow_b>255) {rgbrednow_b=255}
	if (rgbrednow_b<0) {rgbrednow_b=0}
	if (rgbgreennow_b>255) {rgbgreennow_b=255}
	if (rgbgreennow_b<0) {rgbgreennow_b=0}
	if (rgbbluenow_b>255) {rgbbluenow_b=255}
	if (rgbbluenow_b<0) {rgbbluenow_b=0}
	
	if (i_step<=speed) {
      	redcol_1 = hexc[Math.floor(rgbrednow/16)];
     	redcol_2 = hexc[Math.floor(rgbrednow)%16];
	 	greencol_1 = hexc[Math.floor(rgbgreennow/16)];
      	greencol_2 = hexc[Math.floor(rgbgreennow)%16];
	  	bluecol_1 = hexc[Math.floor(rgbbluenow/16)];
      	bluecol_2 = hexc[Math.floor(rgbbluenow)%16];
		
		redcol_1_b = hexc[Math.floor(rgbrednow_b/16)];
     	redcol_2_b = hexc[Math.floor(rgbrednow_b)%16];
	 	greencol_1_b = hexc[Math.floor(rgbgreennow_b/16)];
      	greencol_2_b = hexc[Math.floor(rgbgreennow_b)%16];
	  	bluecol_1_b = hexc[Math.floor(rgbbluenow_b/16)];
      	bluecol_2_b = hexc[Math.floor(rgbbluenow_b)%16];
	  	var backcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2
		var backcolor_b="#"+redcol_1_b+redcol_2_b+greencol_1_b+greencol_2_b+bluecol_1_b+bluecol_2_b
		if (ie5 && gradient_effect!="none") {
			if (gradient_effect=="horizontal") {var gr_effect=1}
			if (gradient_effect=="vertical") {var gr_effect=0}
	  		document.body.style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+backcolor+", endColorstr="+backcolor_b+", GradientType="+gr_effect+")"
		}
		else {
	  		document.bgColor=backcolor 
		}

		i_step++
		var timer=setTimeout("changefromto()",pausesteps);
	
    } 
  	else {
  		clearTimeout(timer)
		i_step=1
		i_loop++
		if (i_loop<i_loopmax) {var timer=setTimeout("translateintorgb()",pausebetweencolors);}
  	}
}


if (browserok) {
	window.onload=translateintorgb
}
</script>
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>

  </body>
</html>


RAD
0
Réponse 2 / 2
ruvele Messages postés 18 Date d'inscription   Statut Membre Dernière intervention   5
 
Merci beaucoup finalement j'ai trouvé.

voici la réponse la plus simple :

<code


<!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>Pulse</title>

<script language="JavaScript">
<!--

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

var i = 0;
var dir = "up";
var proc="reset";

function start() {

if (proc == "reset") {
proc = window.setInterval('changer_fond()', 70);
}
}

function stop() {
clearInterval(proc);
proc = "reset";
}

function changer_fond() {
document.bgColor=tabl_couleurs[i];
if(dir == "up") {

i++;

} else {

i--;
}

if(i == 0) { dir = "up"; }

if(i == 16) { dir= "down"; }
}
//-->
</script>

</head>

<body>

<a href="javascript:start();">start</a>
<br/>
<a href="javascript:stop();">stop</a>

</body>
</html>

</code>

;-)
0

Discussions similaires

Excel 365 + Windows 10 Arrêt défilement flèches
VALBRISE -
VALBRISE -

5 réponses
Changer la couleur de fond d'un en-tête
Adamantine -
m@rina -

4 réponses
Excel : les flèches déplacent le document
Hypergonar -
Hypergonar -

2 réponses
Touche arrêt défil sur clavier
munette -
inconnusoldat -

48 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses