[Résolu][Javascript] Comment faire un décompte du temps de construction ?

[Sephi-Chan]

Deux choses sur tes demandes d'aide :

• Donne un argument au BBCode pour afficher du code : code=PHP par exemple. Ça permet d'activer la coloration syntaxique.
  
• Réfléchis au nom que tu donnes à ton sujet : "Problème script PHP et Javascript", c'est nul. Ça ne nous donne aucune information sur ce qu'on va trouver (et donne peu d'informations aux moteurs de recherche). Quelque chose comme "Comment faire un décompte du temps de construction ?" est plus pertinent.
  

Maintenant, pour ton problème en-lui même, ça semble tout à fait normal puisque dans ton décompte, tu affiches un compteur de 5 minutes. Il faudrait plutôt une fonction Javascript du type : remainingTimeUntil.

Voilà ce que je te suggère (tu peux tester en appuyant sur le bouton "Run" en haut à gauche). L'astuce, c'est de génèrer du code HTML tout simple avec des attributs personnalisés et laisse faire Javascript (ici avec jQuery). Ainsi tu garderas un code clair qui ne sera pas pollué par des scripts.

Dans data-finish-at, tu mets l'heure de fin de la production (en respectant ce format). Et dns data-finish-url, tu mets l'URL du lien qui remplacera le compteur.

<div id="buildings">

    <div id="building_1" data-finish-at="2012-01-31 13:30:00" data-finish-url="http://url/for/link">

        <h3>Caserne</h3>

        <span class="displayer">…</span>

    </div>

    <div id="building_2" data-finish-at="2012-02-02 08:20:00" data-finish-url="http://url/for/link">

        <h3>Moulin</h3>

        <span class="displayer">…</span>

    </div>

</div>

Je ne sais pas sous quelle forme tu stockes tes dates, dis-moi si tu as des problèmes pour produire ce code HTML à partir de ton script PHP.

Ensuite, on utilise Javascript pour transformer tout ça.

// Transforme le nombre de secondes restant en une chaîne.

// Modifie cette fonction pour un affichage plus joli.

window.remainingTimeAsString = function(remainingTimeInSeconds){

    console.log("Convert: ", remainingTimeInSeconds);

    string = remainingTimeInSeconds + " secondes";

    return string;

}



    

// Met à jour les compteurs de la page.

window.updateBuildingsTimers = function(){

    $("#buildings > div").each(function(index, building){

        var $building  = $(building),

            $displayer = $building.find(".displayer"),

            finishAt   = new Date($building.data("finish-at")),

            now        = new Date();

        

        // Si le bâtiment n'est pas encore terminé, on actualise l'affichage.

        if(now < finishAt){

            // On change l'affichage du compteur.

            var remainingTimeInSeconds = Math.ceil((finishAt - now) / 1000),

                newTimerText           = remainingTimeAsString(remainingTimeInSeconds);

            

            $displayer.text(newTimerText);

        }

        else {

            // On remplace le compteur pour mettre un lien à la place.

            var url   = $building.data("finish-url"),

                $link = $('<a />', { href: url, text: "Terminé !" });

            

            $displayer.html($link);

        }

    });

}



    

// Toutes les secondes, tu relances la fonction.

window.timer = setInterval(window.updateBuildingsTimers, 1000);

Il faut que ce code soit appelé quand le DOM est chargé, donc soit en mettant tes balises script avant la fermeture de la balise body, soit en embarquant le code dans un callback au chargement.

Dis-moi si tu rencontres des problèmes.