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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par guicara, 1 Mars 2009.

  1. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 558
    J'aime reçus:
    0
    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 :D
     
  2. erestrebian
    erestrebian WRInaute occasionnel
    Inscrit:
    15 Juin 2007
    Messages:
    411
    J'aime reçus:
    0
    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!
     
  3. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 558
    J'aime reçus:
    0
    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 ?
     
  4. tonguide
    tonguide WRInaute passionné
    Inscrit:
    28 Novembre 2003
    Messages:
    1 158
    J'aime reçus:
    0
    cherche du côté de la fonction "setTimeout"
     
  5. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 558
    J'aime reçus:
    0
    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 ?
     
  6. tonguide
    tonguide WRInaute passionné
    Inscrit:
    28 Novembre 2003
    Messages:
    1 158
    J'aime reçus:
    0
    Tu mets un ID sur ton input button (comme sur un DIV quoi) et oui, tu fais un display none
     
  7. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 558
    J'aime reçus:
    0
    Merci à tout les deux ;)
    En faite le Javascript, c'est pas si nul que ça :p

    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);
    }
     
  8. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 558
    J'aime reçus:
    0
    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
     
  9. erestrebian
    erestrebian WRInaute occasionnel
    Inscrit:
    15 Juin 2007
    Messages:
    411
    J'aime reçus:
    0
    il faut que tu réinitialise la variable secondes dans le else...

    je ne comprends pas l'utilité de minutes et heures
     
  10. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 558
    J'aime reçus:
    0
    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
     
  11. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 558
    J'aime reçus:
    0
    J'ai tout essayé et sa ne marche toujours pas.
    Une aide serait bienvenue :D
     
Chargement...
Similar Threads - Petite aide Javascript Forum Date
Aide petite regex Développement d'un site Web ou d'une appli mobile 28 Juin 2022
Petite aide pour faire un bash unix Administration d'un site Web 4 Août 2011
Petite aide traduction :) Débuter en référencement 13 Juin 2010
Hello ,petite aide à une question qui reste sans reponse pour moi ! Crawl et indexation Google, sitemaps 2 Septembre 2009
Aidez moi! Comment lancer un site de petites annonces? Débuter en référencement 28 Juin 2009
Besoin d'une petite aide pour referencement google Problèmes de référencement spécifiques à vos sites 20 Juin 2009
Petite aide avec les regex :D Développement d'un site Web ou d'une appli mobile 25 Juin 2007
petite aide pour formulaire de connexion coolsmile Développement d'un site Web ou d'une appli mobile 4 Septembre 2006
RESOLU Grande incompréhension pour les htaccess, petite aide URL Rewriting et .htaccess 21 Mai 2006
petite aide pour rewrting de l'index URL Rewriting et .htaccess 5 Novembre 2005
fonction pref_match_all php petite aide Administration d'un site Web 30 Octobre 2005
Petites "aides" et/ou "explications" Débuter en référencement 19 Juillet 2005
Petite aide demandée Problèmes de référencement spécifiques à vos sites 5 Juin 2005
Petite aide demandée Administration d'un site Web 5 Juin 2005
Une petite aide pour que mon site soit sur google? Problèmes de référencement spécifiques à vos sites 29 Avril 2005
petite aide pour petit probleme sql et php ( de variable Administration d'un site Web 2 Novembre 2004
Besoin d'une petite aide svp. Problèmes de référencement spécifiques à vos sites 22 Octobre 2004
Petite aide requise pour une regle URL Rewriting et .htaccess 12 Novembre 2003
Besoin petite aide pour rewrite 10 derniers messages forum URL Rewriting et .htaccess 10 Août 2003
Demande d'avis - Petites phrases Présidentielle 2022 Demandes d'avis et de conseils sur vos sites 24 Octobre 2021