Aide pour affichage d'un compte à rebours

Question

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

cs_ludwig59 · Answer

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

donkeykong · Answer

Merci ça va m'aider je pense.

Mais pour afficher le décompte ?

cs_ludwig59 · Answer

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.

donkeykong · Answer

Et ça va se rafraichir automatiquement ?

007Julien · Answer

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.

donkeykong · Answer

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 ?

007Julien · Answer

En javascript cela pourrait donner ceci : Untitled Attention, je vais me désintégrer dans secondes ! 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é ?

donkeykong · Answer

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 ?

007Julien · Answer

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 !

donkeykong · Answer

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.

donkeykong · Answer

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

Aide pour affichage d'un compte à rebours

11 réponses

Votre réponse

Discussions similaires