A voir également:
- [javaxcript / PHP] Temps
- Blocage agriculteur carte en temps réel - Accueil - Transports & Cartes
- Renommer plusieurs fichiers en même temps - Guide
- Easy php - Télécharger - Divers Web & Internet
- Combien de temps reste une story sur facebook - Guide
- Ss06 snapchat combien de temps - Forum Snapchat
25 réponses
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
14 juin 2008 à 12:29
14 juin 2008 à 12:29
hé j'ai jamais dit que mon code correspondrait exactement à ce que tu recherches ... sache que c'est quasiment impossible de trouver un script qui fasse exactement ce que tu veux sur le net par contre ça peut t'orienter, te donner la marche à suivre ...
T'as pas besoin de pause et ben tu l'utilises pas LOL Par contre lorsque tu charges ta page il faut bien que tu initialises chaque compteur avant de lancer les décomptes non ?
Mon ex : Comment Ca Marche lol
La classe CountDown sert à gérer chaque compteur individuellement
Chaque compteur possède les propriétés suivantes :
this.duration : la durée du compteur
this.timeLeft : le temps restant
this.id : l'id du tag div dans lequel est placé le compteur
this.state : l'état du compteur - démarré/arrêté/en pause etc
this.parent : le gestionnaire de compteur de type CountDownManager (en fait CountDownManager gère simplement une liste d'objet CountDown)
Oui mais c'est quoi this ?
C'est tout ce qui fait le puissance de la prog objet : this est une référence vers l'objet actuel
Si j'écris
var cpt1 = new CountDown("div_cpt1",100);
var cpt2 = new CountDown("div_cpt2",200);
la fonction
est appelée 2 fois de suite pour initialiser 2 objets. Note que c'est l'opérateur new qui fait toute la différence. ici on n'appelle pas simplement la fonction CountDown() on instancie d'abord un nouvel objet qui est implicitement passé comme paramètre à la fonction CountDown et ce paramètre "automatique" s'appelle this
this est différent à chaque fois du fait de l'utilisation de l'opérateur new : on a bien 2 objets distincts
Et que stockes-t-on dans cpt1 et cpt2 à ton avis ? hé bien la valeur de this tout simplement car il ne faut surtout pas la perdre ...
Ensuite lorsqu'on appelle une méthode par ex display()
cpt1.display() dans la méthode display() this contient la valeur stockée dans cpt1
de même
cpt2.display() dans la méthode display() this contient la valeur stockée dans cpt2
on ne risque donc pas de mélanger les variables.
Pour chaque compteur on doit créer un nouvel objet de type CountDown, tout comme pour créer un nouveau tableau en JS tu écrirais mon_tableau=new Array(); ou encore en php $mon_tableau=array();
Ex
var mon_compteur = new CountDown(...);
Lors de la création je passe également 2 paramètres :
- le premier id correspond à l'id d'un tag <div> qui va contenir le compteur
- le second la durée du compteur que je nomme duration
Par ex dans ma page html j'ai un div => <grasdiv></gras>
alors je peux créer un compteur de 5 minutes par ex ainsi
var mon_compteur = new CountDown("var mon_compteur",300);
Cette instruction ne fait rien que de créer le compteur en mémoire : elle ne l'affiche pas et ne le lance pas !
En effet tu peux remarquer que le div est vide ....
Pour que le compteur apparaisse il faut d'abord le créer dans la page c'est-à-dire mettre quelque chose dans la balise div : c'est le rôle de la méthode build() (une méthode est une fonction comme les autres sauf qu'elle s'applique à un objet)
Comme tu peux le voir elle modifie le contenu de la balise div en manipulant sa propriété innerHTML
Bien sûr tu peux aussi initialiser directement tes div dans la page HTML mais c'est plus fastidieux et source d'erreur car il faut penser à donner un id spécifique à l'intérieur de chaque div
Au final lorsque tu appelles build() c'est comme si tu écrivais :
<div id="conteneur_du_compteur"><img id="conteneur_du_compteur_0" src="c0.gif">.....</div>
Note comment les id sont associés : c'est très important !
La méthode
T'as pas besoin de pause et ben tu l'utilises pas LOL Par contre lorsque tu charges ta page il faut bien que tu initialises chaque compteur avant de lancer les décomptes non ?
Mon ex : Comment Ca Marche lol
La classe CountDown sert à gérer chaque compteur individuellement
Chaque compteur possède les propriétés suivantes :
this.duration : la durée du compteur
this.timeLeft : le temps restant
this.id : l'id du tag div dans lequel est placé le compteur
this.state : l'état du compteur - démarré/arrêté/en pause etc
this.parent : le gestionnaire de compteur de type CountDownManager (en fait CountDownManager gère simplement une liste d'objet CountDown)
Oui mais c'est quoi this ?
C'est tout ce qui fait le puissance de la prog objet : this est une référence vers l'objet actuel
Si j'écris
var cpt1 = new CountDown("div_cpt1",100);
var cpt2 = new CountDown("div_cpt2",200);
la fonction
function CountDown(id,duration)
{
this.duration = duration;
this.startTime = 0;
this.id = id;
this.timeLeft = this.duration;
this.state = CountDown.States.READY;
}
est appelée 2 fois de suite pour initialiser 2 objets. Note que c'est l'opérateur new qui fait toute la différence. ici on n'appelle pas simplement la fonction CountDown() on instancie d'abord un nouvel objet qui est implicitement passé comme paramètre à la fonction CountDown et ce paramètre "automatique" s'appelle this
this est différent à chaque fois du fait de l'utilisation de l'opérateur new : on a bien 2 objets distincts
Et que stockes-t-on dans cpt1 et cpt2 à ton avis ? hé bien la valeur de this tout simplement car il ne faut surtout pas la perdre ...
Ensuite lorsqu'on appelle une méthode par ex display()
cpt1.display() dans la méthode display() this contient la valeur stockée dans cpt1
de même
cpt2.display() dans la méthode display() this contient la valeur stockée dans cpt2
on ne risque donc pas de mélanger les variables.
Pour chaque compteur on doit créer un nouvel objet de type CountDown, tout comme pour créer un nouveau tableau en JS tu écrirais mon_tableau=new Array(); ou encore en php $mon_tableau=array();
Ex
var mon_compteur = new CountDown(...);
Lors de la création je passe également 2 paramètres :
- le premier id correspond à l'id d'un tag <div> qui va contenir le compteur
- le second la durée du compteur que je nomme duration
Par ex dans ma page html j'ai un div => <grasdiv></gras>
alors je peux créer un compteur de 5 minutes par ex ainsi
var mon_compteur = new CountDown("var mon_compteur",300);
Cette instruction ne fait rien que de créer le compteur en mémoire : elle ne l'affiche pas et ne le lance pas !
En effet tu peux remarquer que le div est vide ....
Pour que le compteur apparaisse il faut d'abord le créer dans la page c'est-à-dire mettre quelque chose dans la balise div : c'est le rôle de la méthode build() (une méthode est une fonction comme les autres sauf qu'elle s'applique à un objet)
Comme tu peux le voir elle modifie le contenu de la balise div en manipulant sa propriété innerHTML
Bien sûr tu peux aussi initialiser directement tes div dans la page HTML mais c'est plus fastidieux et source d'erreur car il faut penser à donner un id spécifique à l'intérieur de chaque div
Au final lorsque tu appelles build() c'est comme si tu écrivais :
<div id="conteneur_du_compteur"><img id="conteneur_du_compteur_0" src="c0.gif">.....</div>
Note comment les id sont associés : c'est très important !
La méthode
j'ai essayé d'analyser comme j'ai pu le code, et a ce que je comprends, les compteurs se créer avec ca :
for (var i=0; i<5; i++)
{
compteurs.add("compteur_"+i,(i+1)*3);
}
compteurs.init();
pour l'affichage, ca n'a pas l'air compliqué, mais bon, pour le moment j'essaye juste d'y adapter mon code.
j'ai tester avec deux enregistrement, la strucuture ressemble a ca :
$pipo=0;
while ($ligne = mysql_fetch_array($Tps))
{
$TPScompteur[$pipo]=$ligne['Tps'];
include("compteur2.php");
$pipo++;
}
et j'ai modifier la partie citée en haut (avec le for) dans compteur.php, ce qui donne :
compteurs.add("compteur_<?php echo $pipo; ?>",<?php echo $TPScompteur[$pipo]; ?>);
compteurs.init();
mais ca marche pas du tout :p
je pense que c'est parceque le fichier compteur2.php ne doit etre appelé qu'une sele fois, mais je n'en suis pas sur, le probleme c'est que dans ma boucle while, il y'a tout un tas de traitement, donc je ne peux pas vraiment remplir le tableau des temps, et faire l'appel pour le tableau en entier d'un coup :/
enfin, deja j'aimerai savoir si mon probleme est bien a cause d'un appel multiple au fichier compteur2.php ou non, si c'est le cas, peut etre que je pourrais me débrouiller, sinon bah retour case départ ^^
merci pour l'aide au fait ;)
for (var i=0; i<5; i++)
{
compteurs.add("compteur_"+i,(i+1)*3);
}
compteurs.init();
pour l'affichage, ca n'a pas l'air compliqué, mais bon, pour le moment j'essaye juste d'y adapter mon code.
j'ai tester avec deux enregistrement, la strucuture ressemble a ca :
$pipo=0;
while ($ligne = mysql_fetch_array($Tps))
{
$TPScompteur[$pipo]=$ligne['Tps'];
include("compteur2.php");
$pipo++;
}
et j'ai modifier la partie citée en haut (avec le for) dans compteur.php, ce qui donne :
compteurs.add("compteur_<?php echo $pipo; ?>",<?php echo $TPScompteur[$pipo]; ?>);
compteurs.init();
mais ca marche pas du tout :p
je pense que c'est parceque le fichier compteur2.php ne doit etre appelé qu'une sele fois, mais je n'en suis pas sur, le probleme c'est que dans ma boucle while, il y'a tout un tas de traitement, donc je ne peux pas vraiment remplir le tableau des temps, et faire l'appel pour le tableau en entier d'un coup :/
enfin, deja j'aimerai savoir si mon probleme est bien a cause d'un appel multiple au fichier compteur2.php ou non, si c'est le cas, peut etre que je pourrais me débrouiller, sinon bah retour case départ ^^
merci pour l'aide au fait ;)
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
14 juin 2008 à 14:57
14 juin 2008 à 14:57
j'ignore ce que contient ton fichier compteur2.php alors ...
Sinon pour
for (var i=0; i<5; i++)
{
compteurs.add("compteur_"+i,(i+1)*3);
}
compteurs.init();
tu noteras que j'ai défini 2 classes d'objet : CountDown qui gère un compteur et CountDownManager qui gère une liste de compteurs.
Pourquoi ? Pour éviter de lancer un timer via setInterval séparé pour chaque compteur. A la place j'en utilise un seul qui est utilisé par CountDownManager pour l'ensemble des compteurs qu'il gère. Il faut bien voir que si tu lances trop de timers tu risques de planter le navigateur. grrrr
compteurs est donc de type CountDownManager
compteurs.add créé en fait un nouveau compteur de type CountDown et l'ajoute à la liste des compteurs que CountDownManager possède en interne : cette liste est une propriété de CountDownManager elle se nomme items.
Tu noteras que items n'est ni plus ni moins qu'un objet prédifini Javascript de type Array ... c'est à dire un tableau !
CountDownManager.prototype.add=function(id,duration)
{
var item = new CountDown(id,duration);
item.index = this.items.length;
item.parent = this;
this.items[this.items.length]=item;
return item;
}
var item = new CountDown(id,duration);
Créé un nouveau compteur avec l'id du div et la durée passée en paramètre à la fct add() et le stocke dans une variable locale nommée item (note qu'ici je n'utilise pas this.item mais item tout court c'est une variable locale à la fct et temporaire mais elle ne fait pas partie des propriétés de l'objet CoutDownManager)
CountDownManager ne se sert pas lui même de ces paramètres c'est pourquoi ils ne sont pas conservés après l'appel de la fct
Note que la création se passe exactement comme je te l'ai dit ds mon post précédent ;-)
item.index = this.items.length;
bon ok ici je triche un peu : j'ajoute une nouvelle propriété dans l'objet item (alors que je ne l'ai pas explicitement déclarée dans la classe CountDown ! Ben oui Javascript autorise ce genre de fantaisie)
l'index ici correspond simplement à la position de l'objet item dans le tableau items
item.parent = this;
j'associe le parent (en fait l'objet CountDownManager) au compteur. dans mon ex this = l'objet référencé dans la variable compteurs
this.items[this.items.length]=item;
Ajoute le nouveau compteur item dans le tableau items
this.items.length retourne la taille du tableau donc la premère fois comme
this.items.length vaut 0 (en effet par défaut le tableau items est vide donc sa taille est à zéro logique non ?)
c'est comme si on écrivait this.items[0] = item, la fois suivante this.items[1] = item et ainsi de suite
Note la taille du tableau est automatiquement gérée par Javascript : en fait un tableau est un objet en JS qui stocke sa taille en interne malin :-)
return item;
retourne l'objet de type CountDown qui vient d'être ajouté au cas où on en aurait besoin: pas utilisé ici
Si tu regardes attentivement les autres méthodes de CountDownManager tu noteras qu'il se contente d'appeller les méthodes des objets CountDown contenus dans sa liste dans des boucles for
Enfin la boucle for (var i=0; i<5; i++) c'est juste parce que je sais que dans ma page j'ai 5 compteurs compteur_0 à compteur_4 mais bien sûr ce n'est pas obligatoire.
De plus j'en profite pour initailiser une durée différence pour chaque compteur : en fait un multiple de 3. c'est purement arbitraire.
Enfin c'est la fonction compteurs.init() qui elle créé vraiment les compteurs HTML et les affiche
Sinon pour
for (var i=0; i<5; i++)
{
compteurs.add("compteur_"+i,(i+1)*3);
}
compteurs.init();
tu noteras que j'ai défini 2 classes d'objet : CountDown qui gère un compteur et CountDownManager qui gère une liste de compteurs.
Pourquoi ? Pour éviter de lancer un timer via setInterval séparé pour chaque compteur. A la place j'en utilise un seul qui est utilisé par CountDownManager pour l'ensemble des compteurs qu'il gère. Il faut bien voir que si tu lances trop de timers tu risques de planter le navigateur. grrrr
compteurs est donc de type CountDownManager
compteurs.add créé en fait un nouveau compteur de type CountDown et l'ajoute à la liste des compteurs que CountDownManager possède en interne : cette liste est une propriété de CountDownManager elle se nomme items.
Tu noteras que items n'est ni plus ni moins qu'un objet prédifini Javascript de type Array ... c'est à dire un tableau !
CountDownManager.prototype.add=function(id,duration)
{
var item = new CountDown(id,duration);
item.index = this.items.length;
item.parent = this;
this.items[this.items.length]=item;
return item;
}
var item = new CountDown(id,duration);
Créé un nouveau compteur avec l'id du div et la durée passée en paramètre à la fct add() et le stocke dans une variable locale nommée item (note qu'ici je n'utilise pas this.item mais item tout court c'est une variable locale à la fct et temporaire mais elle ne fait pas partie des propriétés de l'objet CoutDownManager)
CountDownManager ne se sert pas lui même de ces paramètres c'est pourquoi ils ne sont pas conservés après l'appel de la fct
Note que la création se passe exactement comme je te l'ai dit ds mon post précédent ;-)
item.index = this.items.length;
bon ok ici je triche un peu : j'ajoute une nouvelle propriété dans l'objet item (alors que je ne l'ai pas explicitement déclarée dans la classe CountDown ! Ben oui Javascript autorise ce genre de fantaisie)
l'index ici correspond simplement à la position de l'objet item dans le tableau items
item.parent = this;
j'associe le parent (en fait l'objet CountDownManager) au compteur. dans mon ex this = l'objet référencé dans la variable compteurs
this.items[this.items.length]=item;
Ajoute le nouveau compteur item dans le tableau items
this.items.length retourne la taille du tableau donc la premère fois comme
this.items.length vaut 0 (en effet par défaut le tableau items est vide donc sa taille est à zéro logique non ?)
c'est comme si on écrivait this.items[0] = item, la fois suivante this.items[1] = item et ainsi de suite
Note la taille du tableau est automatiquement gérée par Javascript : en fait un tableau est un objet en JS qui stocke sa taille en interne malin :-)
return item;
retourne l'objet de type CountDown qui vient d'être ajouté au cas où on en aurait besoin: pas utilisé ici
Si tu regardes attentivement les autres méthodes de CountDownManager tu noteras qu'il se contente d'appeller les méthodes des objets CountDown contenus dans sa liste dans des boucles for
Enfin la boucle for (var i=0; i<5; i++) c'est juste parce que je sais que dans ma page j'ai 5 compteurs compteur_0 à compteur_4 mais bien sûr ce n'est pas obligatoire.
De plus j'en profite pour initailiser une durée différence pour chaque compteur : en fait un multiple de 3. c'est purement arbitraire.
Enfin c'est la fonction compteurs.init() qui elle créé vraiment les compteurs HTML et les affiche
compteur.php c'est ce script, celui dont on parle lol
mais le truc qui pose probleme c'est le fait que j'appelle ce fichier, ce script, je sais pas comment ca s'appelle, 'fin bref l'ensemble du fichier JS des compteurs, je l'appelle plusieurs fois, a chaque tour de boucle de ma requete sql.
du coup, il me cré a chaque fois un ensemble de compteurs, et ce que je cherche c'est simplement un affichage dynamique d'un temps, et .. euh bon j'arrive pas a trouver les mots pour bien m'expliquer et je commence a avoir sacrement mal au crane :/ mais en gros ce que je cherche c'est ca :
boucle{
//affichage d'un compteur dynamique selon la valeur de $tpstmp
$tptms=ligne[tps] // en gros le tps de l'enregistrement de la base de donnée
include("script machin truc dont on cause.php");
}
et que du coup ca affiche le compteur dynamique.
Je cherche d'autres scripts ailleurs mais a chaque fois je n'arrive pas a avoir les differents compteurs qui tournent en meme temps (j'ai bien sur essayé de modifier des trucs, mais la plupart du code c'est du chinois pour moi)
je continue mes tests, je reposterai si j'arrive a quelque chose
mais le truc qui pose probleme c'est le fait que j'appelle ce fichier, ce script, je sais pas comment ca s'appelle, 'fin bref l'ensemble du fichier JS des compteurs, je l'appelle plusieurs fois, a chaque tour de boucle de ma requete sql.
du coup, il me cré a chaque fois un ensemble de compteurs, et ce que je cherche c'est simplement un affichage dynamique d'un temps, et .. euh bon j'arrive pas a trouver les mots pour bien m'expliquer et je commence a avoir sacrement mal au crane :/ mais en gros ce que je cherche c'est ca :
boucle{
//affichage d'un compteur dynamique selon la valeur de $tpstmp
$tptms=ligne[tps] // en gros le tps de l'enregistrement de la base de donnée
include("script machin truc dont on cause.php");
}
et que du coup ca affiche le compteur dynamique.
Je cherche d'autres scripts ailleurs mais a chaque fois je n'arrive pas a avoir les differents compteurs qui tournent en meme temps (j'ai bien sur essayé de modifier des trucs, mais la plupart du code c'est du chinois pour moi)
je continue mes tests, je reposterai si j'arrive a quelque chose
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
j'ai trouvé ce script qui m'a l'air plus simple, tel qu'il est la j'arrive a avoir mes diffenrents temps qui s'affichent correctement mais seul le dernier affiché est dynamique, les precedent le temps s'affiche mais est immobile.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Créer un compte à rebours</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
</head>
<body>
<script language="JavaScript">
function t()
{
var compteur=document.getElementById('compteur');
s=duree;
m=0;h=0;
if(s<0)
{
compteur.innerHTML="arrivé<br />"+"<a href=http://lien1.fr>continuer</a>"
}
else
{
if(s>59)
{
m=Math.floor(s/60);
s=s-m*60
}
if(m>59)
{
h=Math.floor(m/60);
m=m-h*60
}
if(s<10)
{
s="0"+s
}
if(m<10)
{
m="0"+m
}
compteur.innerHTML=h+"h"+m+"m"+s//+"<br /><a href=http://lien2.fr>interrompre</a>"
}
duree=duree-1;
window.setTimeout("t();",999);
}
</script>
<div id="compteur"></div>
<script language="JavaScript">
duree="<?php echo $timestampF;?>";
t();
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Créer un compte à rebours</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
</head>
<body>
<script language="JavaScript">
function t()
{
var compteur=document.getElementById('compteur');
s=duree;
m=0;h=0;
if(s<0)
{
compteur.innerHTML="arrivé<br />"+"<a href=http://lien1.fr>continuer</a>"
}
else
{
if(s>59)
{
m=Math.floor(s/60);
s=s-m*60
}
if(m>59)
{
h=Math.floor(m/60);
m=m-h*60
}
if(s<10)
{
s="0"+s
}
if(m<10)
{
m="0"+m
}
compteur.innerHTML=h+"h"+m+"m"+s//+"<br /><a href=http://lien2.fr>interrompre</a>"
}
duree=duree-1;
window.setTimeout("t();",999);
}
</script>
<div id="compteur"></div>
<script language="JavaScript">
duree="<?php echo $timestampF;?>";
t();
</script>
</body>
</html>