Aide pour affichage d'un compte à rebours

donkeykong
Messages postés
64
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014
- 7 mars 2011 à 13:12
donkeykong
Messages postés
64
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014
- 24 mars 2011 à 12:15
Bonjour à tous.

Je suis débutant en PHP et pour m'initier j'ai voulu créer une petite page sans trop me prendre la tête (et qui n'a aucune utilité puisque c'est pour m'initier) :

<?php 
/* variables */
$nombre_maisons = 0;
$temps = 10;

/*corps */
echo "Nombre de maisons :  ";
echo "$nombre_maisons ";
echo " Chrono : ";

echo "" ;

?>
 

</html>


Bien sûr, ce code n'est pas encore terminé.
Explication de ce que je voudrais arriver à faire : on a au début un nombre de maison égal à zéro, quand on appuie sur le bouton "construire" un compte à rebours de 10 secondes se lance, à la fin de ce compte à rebours $nombre_maisons est incrémenté de 1.

J'essaie notamment d'afficher le compte à rebours en temps réel sur l'écran, c'est à dire que je voudrais faire en sorte que le défilement des chiffres s'affiche.

J'avais pensé à une fonction qui serait lancée lors du clic sur le bouton :
function chrono()
{
while ($temps > 0)
{
echo "$temps ";
$temps--;
}
}


Mais de 1) ça affiche "10987654321" alors que moi je veux "10", puis "9", etc...
et de 2) ça ne marche pas quand j'appelle la fonction avec "onclick" sur le bouton "construire".

Pouvez vous me donner quelques indications sur ce que je devrais faire s'il vous plait ?
Uniquement sur l'affichage du chrono, le reste je me débrouilles.
Merci d'avance.

11 réponses

cs_ludwig59
Messages postés
128
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
6 mai 2011
2
7 mars 2011 à 14:48
Bonjour,

Tu peux regarder du côté de a fonction settimeout qui te permet d'appeler une fonction toute les n millisecondes.
Tu peux donc, toute les secondes appeler une fonction qui décrémente le chrono de 1
0
donkeykong
Messages postés
64
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014

7 mars 2011 à 15:06
Merci ça va m'aider je pense.

Mais pour afficher le décompte ?
0
cs_ludwig59
Messages postés
128
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
6 mai 2011
2
7 mars 2011 à 15:09
Tu peux, dans une div avec un id, afficher la valeur 10, puis dans la fonction qui décrémente le chrono, changer la valeur de la div avec la nouvelle valeur.
0
donkeykong
Messages postés
64
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014

7 mars 2011 à 16:11
Et ça va se rafraichir automatiquement ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
007Julien
Messages postés
276
Date d'inscription
mercredi 22 septembre 2010
Statut
Membre
Dernière intervention
8 janvier 2014
4
8 mars 2011 à 00:34
Le PHP c'est fait pour construire une page et s'en débarrasser le plus vite possible pour ne pas surcharger le serveur !

Ce n'est donc pas une très bonne idée pour commencer le PHP, que d'essayer d'actualiser des données toutes les secondes...

Et puis le setTimeout est une fonction javascript !

Mieux vaudrait chercher à afficher un diction pour chaque jour de la semaine ou du mois, sur un fond d'écran variable suivant l'heure du jour à l'ouverture de la page.
0
donkeykong
Messages postés
64
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014

8 mars 2011 à 11:34
Ca je sais faire ;)

Pour le reste je pensais à un compte à rebours comme ceux qu'il y a sur certains site comme rapidshare, pour ça je fais quoi ?
0
007Julien
Messages postés
276
Date d'inscription
mercredi 22 septembre 2010
Statut
Membre
Dernière intervention
8 janvier 2014
4
8 mars 2011 à 12:47
En javascript cela pourrait donner ceci :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Untitled</title>
<style type="text/css">
body {font-size:48px;text-align:center}
p{width:400px;margin:40px auto;}
</style>
</head>

Attention,
je vais me désintégrer dans
 secondes !


<script type="text/javascript">
var n=10;
function car(){
document.getElementById('idc').innerHTML=n--;
if (0<n) setTimeout(car,1000);
else {n=10;document.getElementById('idc').innerHTML=0;exp()}
}
function exp(){
if (document.getElementById('bdy').style.backgroundColor!='#000')
  document.getElementById('bdy').style.backgroundColor='#000';
else document.getElementById('bdy').style.backgroundColor='#fff000';
if (0<n--) setTimeout(exp,100+Math.round(100*Math.random()));
}
car();
</script>


Maintenant, s'il s'agissait d'autre chose, il conviendrait de disposer d'un lien ou d'une description un peu plus explicite du compte à rebours souhaité ?
0
donkeykong
Messages postés
64
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014

8 mars 2011 à 13:31
Voilà Julien, tu as exactement compris ce que veux.

Maintenant vu que je m'y connais un peu moins en javascript que toi, peux tu un peu m'expliquer ton code s'il te plait ?
0
007Julien
Messages postés
276
Date d'inscription
mercredi 22 septembre 2010
Statut
Membre
Dernière intervention
8 janvier 2014
4
8 mars 2011 à 14:51
Mon code comprend une variable globale n (définie à l'extérieur des fonctions cette variable est accessible dans tout le script), dont la valeur initiale est fixée à 10 (1ère ligne); puis, deux fonctions nommées car (comme compte à rebours) et exp (comme explosion).

La première de ces fonctions récupère, par son identifiant (instruction document.getElementById('idc')) l'objet, que constitue le span dans le DOM (en quelque sorte un duplicata du document constitué non plus de balises HTML mais d'objets) pour changer le code inclus (innerHTML) entre les deux balises (le vide initial compris entre le et ) en la valeur de n (soit 10), puis décrémenter n (le n--) qui décrémente après cette insertion (un --n décrémanterait avant et le compte à rebours commencerait à 9). Cette fonction compare ensuite la valeur de n à zéro pour se relancer (le setTimeout(car,1000)) au bout de 1000 millisecondes si n est positif et, au contraire, lancer la deuxième fonction, après avoir remis le compteur n à 10 et mis à 0 la valeur incluse entre les deux balises du span.

Maintenant, la seconde fonction a sensiblement la même structure, mais les modifications portent sur la couleur de fond du body (identifié par un id="bdy"), accessible par la proriété backgroundColor du style de l'objet correspondant.

Cette seconde fonction se rappelle aussi dix fois (vriante sur le comptage dans le test de comparaison) à un rythme plus soutenu pour simuler l'explosion annoncée. Ici, Math.random() délivrant un nombre aléatoire compris entre 0 et 1, la multiplication par 100 puis l'arrondi et l'ajout de 100 permettent d'obtenir un entier alétaoire compris entre 100 et 200 assurant la vision du changement de couleur de fond (on pourrait d'ailleurs descendre tout en restant au dessus d'une trentaine de secondes compte tenu de la persitance des impressions lumineuses).

J'en aurais terminé, en ajoutant que la dernière ligne (le car();) appelle la fonction car puis en précisant que ce script était placé à la fin du body pour que le DOM existe lors de son éxecution (placé dans le header il aurait fallu attendre que le document soit chargé pour lancer le script avec une balise d'ouverture du body modifiée .

Autrement dit, avec le HTML on plante le décors que l'on anime avec un script. À vous de jouer. Ouf !
0
donkeykong
Messages postés
64
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014

11 mars 2011 à 21:38
Merci pour tout ça, et désolé d'être venu 3 jours après.

J'essaie de mettre en application et je te tiens au courant.
0
donkeykong
Messages postés
64
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014

24 mars 2011 à 12:15
Salut,

Tout d'abord excuses moi pour le retard de la réponse, j'ai eu pas mal de choses à faire ces temps ci.
Je te remercie pour le code si c'est toi qui l'a fait et pour avoir pris le temps de m'expliquer.
Bon je vais essayer d'utiliser ton code dans mon programme. La différence c'est que le tiens change le fond d'écran et le mien doit incrémenter une variable
0