Petite aide en Javascript (afficher, cacher, délais, stop)

guicara · 1 Mars 2009

Bonjour,

Tout d'abord je tiens à préciser que je suis une mer***, heu... quiche (!) en Javascript.
Je n'ai jamais voulu m'y intéresser...

Le but :
- Afficher l'image 1 (pendant 10s)
- Cacher l'image 1
- Afficher l'image 2 (pendant 10s)
- Cacher l'image 2)
- Afficher l'image 3
- On ne reboucle PAS

Mon "code" (je sais pas si on peut appeler ça...) :

Code:

function dfucache()
{
	document.getElementById('image1').style.display = 'none';
	document.getElementById('image2').style.display = 'none';
	document.getElementById('image3').style.display = 'none';
} 


function dfu()
{
	document.getElementById('image1').style.display = 'block'; // On affiche l'image 1
	pausecomp(10000);
	 	
	document.getElementById('image1').style.display = 'none'; // On cache l'image 1
	document.getElementById('image2').style.display = 'block'; // On affiche l'image 2
	pausecomp(10000);
	
	document.getElementById('image2').style.display = 'none'; // On cache l'image 2
	document.getElementById('image3').style.display = 'block'; // On affiche l'image 3
}

function pausecomp()
{
	// Trouver sur un site web (c'est sensé faire une pause)
	var date = new Date();
	var curDate = null;
	
	do { curDate = new Date(); }
	while(curDate-date < millis);
}

Code:

<body onload="dfucache()">
...
<div id="image1"><img src="..." alt="" /></div><br />
<div id="image2"><img src="..." alt="" /></div><br />
<div id="image3"><img src="..." alt="" /></div>
...
<input type="button" onclick="dfu()" value="DFU">

L'interruption de 10 secondes ne se fait pas.
J'ai regardé du côté de setTimeout, sa ne ma pas plus avancé...
En même temps, on ne peut pas optimiser le script ?

Merci

erestrebian · 1 Mars 2009

Je ferais plutôt une fonction avec un timer qui s'appelle toutes les 10 secondes dont la première instruction est de caché l'image si elle existe et d'afficher la suivante s'il y en a une...

Je pense qu'avec ceux que tu as déjà comme code, tu devrais y arriver sans trop de soucis.

Bon courage!

guicara · 1 Mars 2009

Les instructions je les ais ("document.getElementById('image1').style.display ..."); mais mon problème c'est la gestion du timer.
Que dois je utiliser pour le timer ?

tonguide · 2 Mars 2009

cherche du côté de la fonction "setTimeout"

guicara · 2 Mars 2009

J'avais déjà cherché de se côté, mais j'avais mal compris le but et le fonctionnement de cette fonction.
Mon script marche bien :

Code:

function dfucache()
{
	document.getElementById('image1').style.display = 'none';
	document.getElementById('image2').style.display = 'none';
	document.getElementById('image3').style.display = 'none';
} 

function dfu1()
{
	document.getElementById('image1').style.display = 'block'; // On affiche IMAGE1
	setTimeout('dfu2()',10000); // On lance la fonction dfu2 après 10 secondes
}

function dfu2()
{
	document.getElementById('image1').style.display = 'none'; // On cache IMAGE1
	document.getElementById('image2').style.display = 'block'; // On affiche IMAGE2
	setTimeout('dfu3()',10000); 
}

function dfu3()
{
	document.getElementById('image2').style.display = 'none'; // On cache IMAGE2
	document.getElementById('image3').style.display = 'block'; // On affiche IMAGE3
}

Code:

<body onLoad="dfucache()">
...
<div id="image1">Texte A</div><br />
<div id="image2">Texte B</div><br />
<div id="image3">Texte C</div>
...
<input type="button" onClick="dfu1()" value="Commencer">

Comment cacher le bouton après qu'on ai cliquer dessus ? style.display = 'none'; mais sur quoi, un Id ?

tonguide · 2 Mars 2009

Tu mets un ID sur ton input button (comme sur un DIV quoi) et oui, tu fais un display none

guicara · 2 Mars 2009

Merci à tout les deux

En faite le Javascript, c'est pas si nul que ça

J'ai par contre encore un problème, et je ne comprend pas pourquoi.
J'ai rajouté un bouton "Recommencer", qui lance dfu1() après 1,5s, sauf que une fois cliquer, les images ne défiles pas normalement (je vois que la 1er et la dernière, et le timer n'est pas respecté).

Code:

function dfucache()
{
	document.getElementById('image1').style.display = 'none';
	document.getElementById('image2').style.display = 'none';
	document.getElementById('image3').style.display = 'none';
	document.getElementById('restart').style.display = 'none';
} 

function recommencer()
{
	dfucache();
	setTimeout('dfu1()',1500);
}

Code:

<input type="button" onClick="recommencer()" value="Recommencer" id="restart">

Edit : J'ai trouvé, comme un grand ! Il faut utiliser la fonction "clearTimeout" qui tue le timer.
Le timer n'était pas tué, c'est donc pour ça qu'il y avait un conflit.

Code:

var retardateur;
var retardateur2;
...
function dfu1()
{
	document.getElementById('image1').style.display = 'block';
	retardateur=setTimeout('dfu2()',10000);
}

function dfu2()
{
	document.getElementById('image1').style.display = 'none';
	document.getElementById('image2').style.display = 'block';
	retardateur2=setTimeout('dfu3()',10000);
}

guicara · 2 Mars 2009

Bonjour,

Je bloque encore sur un point (cette fois si j'ai inséré un décompteur qui affiche le temps restant avant le passage à l'image suivante) :

Code:

var secondes = 9;
var timer;
var text = "";

function Chrono()
{
	if (secondes > 0)
	{
		var minutes = Math.floor(secondes/60);
		var heures = Math.floor(minutes/60);
		secondes -= minutes * 60;

		text = secondes;
		secondes = secondes + (minutes * 60) - 1;
	}
	else
	{
		clearInterval(timer);
		text = "";
	}
	document.getElementById('chrono').innerHTML = text;
}

function DemarrerChrono()
{
	timer = setInterval('Chrono()', 1000);				
}

Dans dfu1() j'ai initialisé la fonction DemarrerChrono();

Seulement, je n'arrive pas à faire un RESET du compteur pour le passage à dfu2 et dfu3.
J'ai tout essayé mais je ne m'en sort pas...

Modèle concret ici : http://www.itouchfrance.fr/dfu-helper-passage-en-mode-dfu-etape-par-etape

erestrebian · 3 Mars 2009

il faut que tu réinitialise la variable secondes dans le else...

je ne comprends pas l'utilité de minutes et heures

guicara · 3 Mars 2009

La variables heures n'a aucun utilisé, je l'ai viré, par contre minutes, et indépendantes des secondes dans ce cas.

J'ai réinitialiser "seconde" dans else, mais sa ne marche toujours pas

Code:

	else
	{
		clearInterval(timer);
		secondes = 9;
		text = "";
	}

Autre problème, comme tu peux le voir dans le lien donné au dessus, dés que le script est lancé, et qu'on clique sur "Recommencer", le décompteur s'emballe (pourtant, comme tu ma dis, la variable secondes devrait être réinitialisé... étrange :O

guicara · 6 Mars 2009

J'ai tout essayé et sa ne marche toujours pas.
Une aide serait bienvenue