Faire un décompte de 10 sec à 0 sec

Ne s'actualise pas.

Sujet résolu

10 septembre 2010 à 20:22:27

Bonjour,

Alors voilà depuis quelque jours je cherche à faire un décompte en javascript de 10 à 0 seconde.

J'ai rechercher sur internet mais j'ai rien trouver mise à part un décompte a partir d'une date ce que je ne veut pas.

voici mon script:

/* -- -- -- Début -- -- -- */
function decompte()
{
	var dcpt = 10;
	var affiche = '';
	
	for ( dcpt; dcpt > -1; dcpt--)
	{
		if(dcpt > 1)
		{
			var affiche = 'Redirection dans '+dcpt+' secondes';
		}
		else
		{
			var affiche = 'Redirection dans '+dcpt+' seconde';
		}
	}
	document.getElementById('Crono').innerHTML = affiche;
}

setInterval('decompte()', 1000);

/* -- -- -- Fin -- -- -- */

Donc ce que je voulais faire c'est afficher dans une balise dont l'id est Crono ceci 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0 et à zéro on arrête.

Mais là il affiche " Redirection dans 0 seconde " directement sans décompte alors que j'actualise la fonction avec setInterval('decompte()', 1000).

Comment faire pour afficher le décompte de 10 à 0 en actualisant tout les secondes ?

Si quelqu'un peut m'aider car là je sèche.

fayçall

10 septembre 2010 à 21:25:48

var cpt = 10;
setInterval(function(){
    --cpt;
    truc.inerHTML = cpt+'';
}, 1000);

PHPeter

10 septembre 2010 à 21:35:45

j'ai trouvé ton souci !!! (oui je suis content car je suis une bille en javascript ^^)

Tu n'affiche rien dans ta boucle !
Donc forcément, ça fait le décompte, puis ça affiche zéro.
Il faut que tu mette l'affichage à l'intérieur de ta boucle et ça devrait marcher

-Noxe-

10 septembre 2010 à 22:11:20

Bonsoir,

Merci de m'aider.

Alors quand je fais ce que dit fayçall en sortant l'initialisation de la variable dcpt, ça affiche "Redirection dans 0 second" et 1 second plu tard il affiche "undefined" donc l'actualisation marche mais ma variable n'est plus défini et si je l'a défini dans le for alors ça affiche plus rien.

Peter111 désolé mais j'ai déjà essayer est ça fait pareil.

Merci quand même, d'autre idées.

lieo

10 septembre 2010 à 23:26:53

Ma méthode est pas des plus courte mais fonctionne

<script type="text/javascript">
// initialise le temps
var cpt = 10;

timer = setInterval(function(){
    if(cpt>0) // si on a pas encore atteint la fin
    {
        --cpt; // décrémente le compteur
        var Crono = document.getElementById("Crono"); // récupère l'id
        var old_contenu = Crono.firstChild; // stock l'ancien contenu
        Crono.removeChild(old_contenu); // supprime le contenu
        var texte = document.createTextNode(cpt); // crée le texte
        Crono.appendChild(texte); // l'affiche
    }
    else // sinon brise la boucle
    {
        clearInterval(timer);
    }
}, 1000);

</script>

<!-- le div ou on affiche le chrono, ne pas le mettre vide -->
La page rafraichira dans <span id="Crono">10</span> secondes.

Ps : j'ai utilisé Dom au lieu de innerHtml par habitude, donc pas de débat entre les deux

.

Edit : pour la peine la version avec innerHtml :

var cpt = 10;

timer = setInterval(function(){
    if(cpt>0)
    {
        --cpt; // décrémente le compteur
        document.getElementById("Crono").innerHTML = "La page s'affichera dans " + cpt + "sec" ;
    }
    else
    {
        clearInterval(timer);
    }
}, 1000);

Hellish

10 septembre 2010 à 23:35:24

var cpt = 10 ;
var x ;
function decompte()
{
if(cpt>=1)
{
document.getElementById("Crono").innerHTML = "La page s'affichera dans " + cpt + "sec" ;
cpt-- ;
x = setTimeout("decompte()",1000) ;
}
else
{
clearTimeout(x) ;
}
}

-Noxe-

10 septembre 2010 à 23:51:57

Merci Hellish

c'est bon ça marche niquel,

voici le script:

/* -- -- -- Début -- -- -- */
var cpt = 10 ;
var x ;

function decompte()
{
	if(cpt>=0)
	{
		if(cpt>1)
		{
			var sec = " secondes.";
		} else {
			var sec = " seconde.";
		}
		document.getElementById("Crono").innerHTML = "Redirection dans " + cpt + sec ;
		cpt-- ;
		x = setTimeout("decompte()",1000) ;
	}
	else
	{
		clearTimeout(x) ;
	}
}
/* -- -- -- Fin -- -- -- */

Et puis dans le body il faut rajouter un onload="decompte();" + une balise avec un id="Crono"

Comme ceci:

<body onload="decompte();">

  <div id="Crono"></div>

</body>

Merci pour votre aide. Problème Résolu.

Tillertan

11 septembre 2010 à 0:14:57

setTimeout("decompte()", 1000);

non non non non non non non Non Non Non Non Non Non Non NON NON NON NON NON NON NON NON !!!

setTimeout(decompte, 1000);

oui oui oui oui oui oui oui Oui Oui Oui Oui Oui Oui Oui OUI OUI OUI OUI OUI OUI OUI OUI !!!

fayçall

11 septembre 2010 à 0:29:17

setTimeout(function(){decompte();}, 1000);
encore mieux

Tillertan

11 septembre 2010 à 0:30:50

Non c'est pas encore mieux.

La fonction anonyme est "mieux" quand tu dois faire passer des arguments. Sans arguments ça ne sert à rien, tu rajoutes une couche de fonction inutilement.

Hellish

11 septembre 2010 à 11:17:13

Ah ok Tiller merci pour cette info

(les bonnes pratiques du JS

)