Aide pour affichage d'un compte à rebours

Signaler
Messages postés
68
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014
-
Messages postés
68
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014
-
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

Messages postés
128
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
6 mai 2011
2
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
Messages postés
68
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014

Merci ça va m'aider je pense.

Mais pour afficher le décompte ?
Messages postés
128
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
6 mai 2011
2
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.
Messages postés
68
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014

Et ça va se rafraichir automatiquement ?
Messages postés
279
Date d'inscription
mercredi 22 septembre 2010
Statut
Membre
Dernière intervention
8 janvier 2014
3
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.
Messages postés
68
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014

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 ?
Messages postés
279
Date d'inscription
mercredi 22 septembre 2010
Statut
Membre
Dernière intervention
8 janvier 2014
3
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é ?
Messages postés
68
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014

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 ?
Messages postés
279
Date d'inscription
mercredi 22 septembre 2010
Statut
Membre
Dernière intervention
8 janvier 2014
3
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 !
Messages postés
68
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014

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.
Messages postés
68
Date d'inscription
jeudi 23 février 2012
Statut
Membre
Dernière intervention
28 février 2014

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