JeuWeb - Crée ton jeu par navigateur
Barre de chargement en js - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Barre de chargement en js (/showthread.php?tid=1706)



Barre de chargement en js - kunutheking - 02-09-2007

Bonjour j'aimerais faire une barre de chargement en js.
Je m'explique : par exemple, lors de la construction d'un bâtiment on a le compte à rebours mais j'aimerais faire une barre de chargement.
J'ai essayé plusieurs trucs (avec des images de jauges ou sinon avec des <div> où on change la couleur de fond) mais sans succès.


RE: Barre de chargement en js - Byleth - 02-09-2007

La barre de chargement en elle même n'est pas très compliquées, tu trouveras un tutorial sur ce site.
Pour le JS, surtout n'oublie jamais que tu ne dois jamais faire tes calculs à partir du JS, reprend ta valeur enregistrée dans la BdD à chaque fois, l'évolution en directe n'étant là que pour faire beau Smile


RE: Barre de chargement en js - kunutheking - 02-09-2007

Byleth a écrit :La barre de chargement en elle même n'est pas très compliquées, tu trouveras un tutorial sur ce site.
Ce n'est pas la barre que je n'arrive pas à faire mais à la faire avancer en même temps que la construction.


RE: Barre de chargement en js - Byleth - 03-09-2007

Bon, je t'explique vite fait :
tu as un temps pour le début et un temps pour la fin (2 timestamp), tu calcule le temps nécessaire à la construction. (exemple 24h)

Tu prends le timestamp actuel et calcul depuis combien de temps à commencé la construction. (exemple 12h)

Tu calcules que tu en es à 50%. Tu as une petite image de 1px de large que tu vas répèter 50 fois (sur une taille de 100px de large pour la jauge) avce une boucle. ça c'est la version statique.

Avec le JS c'est la même chose au début, puis tu utilise l'horloge de JS pour faire avancer la barre. J'imagine que tu calcule combien de temps X il te faut pour 1% et que tu rappels ta fonction JS pour ajouter une petite barre toutes les X secondes. ça te permets de voir l'évolution en direct mais ne doit surtout pas servir de base pour des calculs.

Je ne m'y connais pas trop en JS donc niveau technique je ne peux pas trop t'aider mais je pense que si tu utilises google tu trouveras très facilement Smile