Aide pour affichage d'un compte à rebours

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) :



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 :


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.

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

Merci ça va m'aider je pense.

Mais pour afficher le décompte ?

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.

Et ça va se rafraichir automatiquement ?

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.

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 ?

En javascript cela pourrait donner ceci :


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é ?

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 ?

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 <span id="idc"> et </span>) 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 <body id"bdy" onload="car()">.

Autrement dit, avec le HTML on plante le décors que l'on anime avec un script. À vous de jouer. Ouf !