Aide pour un compteur tout simple

Version imprimable

Salut tous le monde,

Je souhaite créer un compteur tout simple je m'explique:

Je veux que ce compteur s'incrémente de +1 ou peu importe de toute manière cette variable sera modifiable par l'admin (elle sera stockée en bdd), toutes les x secondes (secondes variables).

je veux que mon compteur parte d'un chiffre donne (exemple 200000) et s'incremente toutes les 3 secondes par exemple de +2.

j'espère être clair dans mon explication ce n'est pas facile.

J'ai trouver un script qui fonctionne mais le problème c'est que lorsque tu recharge la page tu reviens a la valeur de la variable de depart.

je vous poste quand même le code de ce compteur:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script type="text/javascript"> <?php $timeDep = 2000; echo "var i = ".$timeDep++.";"; ?> function incremente() { document.getElementById("afficheI").innerHTML = i; i++; setTimeout("incremente()", 1000); } window.onload = incremente; </script>
Code:

<span id=\"afficheI\"></span>

Pour etre plus clair, je precise mon but :
ce compteur va afficher le nombre de litre economise depuis une date, donc incrémentera a l'infini.

29/06/2010, 07h25
vermine

Citation:

Envoyé par MrAl1985

J'ai trouver un script qui fonctionne mais le problème c'est que lorsque tu recharge la page tu reviens a la valeur de la variable de depart.

Bonjour,

Ce sera le cas avec d'autres scripts itou car le Javascript s'exécute côté client. Or un rechargement de la page nettoie tout et renvoi les données du serveur. ;)

Il y aurait peut-être moyen de faire des calculs selon l'heure du serveur ou bien d'utiliser l'ajax pour raffraichir une variable côté serveur qui serait en permanence à jour.
29/06/2010, 12h20
devyan

Bonjour,

Je confirme, le problème ne vient pas de ton Javascript. Il faut que ton serveur mette à jour ta valeur de départ en parallèle de la visualisation de tes pages.

devyan
29/06/2010, 21h52
MrAl1985

Merci pour vos réponses,
donc en clair il faudrait que mon compteur sois un script entièrement code en php et le javascript servant seulement a afficher ce script ? ou je me perds :?

si cette variable de depart es liee au temps grace a mktime() ou une autre fonction ce serait possible ?
30/06/2010, 11h05
devyan

Citation:

Envoyé par MrAl1985

Merci pour vos réponses,
donc en clair il faudrait que mon compteur sois un script entièrement code en php et le javascript servant seulement a afficher ce script ? ou je me perds :?

si cette variable de depart es liee au temps grace a mktime() ou une autre fonction ce serait possible ?

Bonjour,

Il ne faut pas oublier que l'on parle de site web (ou intra/extranet le problème reste le même)
Donc plusieurs utilisateurs peuvent demander la même page (plus ou moins) en même temps. => C'est ton serveur qui doit fournir le compteur et donc gérer son incrémentation (dans ton cas une valeur de la base de données incrémentée toutes les X secondes)

Ensuite tu as une seconde problématique qui correspond à la visualisation de l'évolution du compteur pour l'utilisateur. Là comme décrit précédemment tu as (au moins) 2 solutions possibles :
1/ avoir un script qui fait le même calcul que celui effectué sur ton serveur :
(+) c'est le navigateur qui évalue le compteur, il n'y a pas de "surcharge" du serveur pour appeler la valeur à afficher.
(-) le calcul "déporté" peut induire un décalage dans la valeur du compteur du fait du fonctionnement "déconnecté"

2/ avoir un script qui interroge le serveur (AJAX) pour mettre à jour le compteur :
(+) c'est le serveur qui fourni la valeur
(-) les appels répétés au serveur pour afficher cette valeur vont le "surcharger"

devyan
30/06/2010, 11h33
neo18045

Je vais peut-être dire une grosse connerie mais comme dit plus haut, il y a pas moyen de faire des calcul avec les dates ?

Par exemple tu crées deux variables fixes avec ton chiffre de départ et ta date de départ, et à partir de cette date, tu calcules le nombre de secondes écoulées jusqu'à maintenant, et en fonction de ça, tu calcules de combien sera ton incrémentation sur ton chiffre fixe, et tu affiches ton chiffre fixe + ton incrémentation totale ?
30/06/2010, 12h18
devyan

Citation:

Envoyé par neo18045

Je vais peut-être dire une grosse connerie mais comme dit plus haut, il y a pas moyen de faire des calcul avec les dates ?

Par exemple tu crées deux variables fixes avec ton chiffre de départ et ta date de départ, et à partir de cette date, tu calcules le nombre de secondes écoulées jusqu'à maintenant, et en fonction de ça, tu calcules de combien sera ton incrémentation sur ton chiffre fixe, et tu affiches ton chiffre fixe + ton incrémentation totale ?

Il y a surement moyen, cela dépend de la méthode de calcul de l'incrément.
Quoi qu'il en soit, cela n'entre pas en compte dans le choix technique puisque l'algorithme du calcul du compteur est connu et peut être reproduit en javascript. ;)
30/06/2010, 13h15
neo18045

J'ai pas tout compris en fait... pourquoi la solution ne serait pas viable parce que ça peut être fait en javascript ?

Parce que la solution que je décris au dessus est justement en javascript.

Je m'explique mieux : il fait un script avec des variables global qui s'initialise au chargement de la page par exemple son chiffre de départ, un objet date qui correspond à la date de début du compteur, son indice d'incrémentation (1, 2, 3 ou plus) et son nombre de seconde (toutes les combien de seconde il fait son incrémentation).

Ensuite, toujours à l'initialisation, il calcule le nombre de seconde écoulé entre sa date de départ et maintenant et fait ses petits calculs à partir du résultat, de son nombre de seconde et de son indice d'incrémentation, et récupère le nombre de départ auquel est ajouter l'incrémentation totale qu'il doit avoir depuis sa date de départ.

Et après, il lui reste juste a faire une incrémentation de son indice toutes les x secondes (qu'il a déclaré) et afficher le résultat.

Je suis peu être pas tout à fait clair, mais avec des paramètre un peu plus précis on pourrait peut-être monter l'algorithme.

PS : mauvaise lecture, il donne des chiffres d'exemple, je regarde ça vite fait tout à l'heure à moins que d'autre le fasse avant.

A revérifier car je ne suis pas très très sûre des calcul :mouarf:

Voilà ma page complète de test :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
    <head>
        <title>TEST</title>
        <script type="text/javascript">
            // la date de début du compteur (avec mois-1)
            var date = new Date(2010,5,29);
            // la date de maintenant
            var now = new Date();
            // le nombre de départ
            var number = 200000;
            // l'incrément
            var increment = 2;
            // le nombre de seconde
            var second = 3;
            // nombre total de seconde depuis la date de départ
            var secondTotal = (now.getTime()-date.getTime())/1000;
            // incrément total
            var incrementTotal = (secondTotal/3)*2;
            // nombre total arrondie
            number = Math.round(number+incrementTotal);
            function init(){
                document.getElementById("monNombre").innerHTML = number;
                // appel de la fonction d'incrémentation toutes les x secondes
                setInterval('incrementation()',second*1000);
            }
            function incrementation(){
                number = number+increment;
                document.getElementById("monNombre").innerHTML = number;
            }
        </script>
    </head>
    <body onload="init();">
        <span id="monNombre"></span> Litre(s)
    </body>
</html>

Citation:

Envoyé par neo18045

J'ai pas tout compris en fait... pourquoi la solution ne serait pas viable parce que ça peut être fait en javascript ?

Parce que la solution que je décris au dessus est justement en javascript.

Je m'explique mieux : il fait un script avec des variables global qui s'initialise au chargement de la page par exemple son chiffre de départ, un objet date qui correspond à la date de début du compteur, son indice d'incrémentation (1, 2, 3 ou plus) et son nombre de seconde (toutes les combien de seconde il fait son incrémentation).

Ensuite, toujours à l'initialisation, il calcule le nombre de seconde écoulé entre sa date de départ et maintenant et fait ses petits calculs à partir du résultat, de son nombre de seconde et de son indice d'incrémentation, et récupère le nombre de départ auquel est ajouter l'incrémentation totale qu'il doit avoir depuis sa date de départ.

Et après, il lui reste juste a faire une incrémentation de son indice toutes les x secondes (qu'il a déclaré) et afficher le résultat.

Je suis peu être pas tout à fait clair, mais avec des paramètre un peu plus précis on pourrait peut-être monter l'algorithme.

PS : mauvaise lecture, il donne des chiffres d'exemple, je regarde ça vite fait tout à l'heure à moins que d'autre le fasse avant.

C'est l'idée que j'avais en tête neo18045, inspire d'une horloge digitale :

Js:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 $(document).ready(function(){ $('#wrap').animate(0); function checktime(prevhour,prevmins,prevsecs){ var now = new Date(); var hour = now.getHours(); if(hour < 10) hour = "0" + hour; var mins = now.getMinutes(); if(mins < 10) mins = "0" + mins; var secs = now.getSeconds(); if(secs < 10) secs = "0" + secs; var hour = hour + ""; var mins = mins + ""; var secs = secs + ""; if(prevhour != hour) { var prevhour = prevhour + "" var hoursplit = hour.split(""); var prevhoursplit = prevhour.split(""); if(prevhoursplit[0] != hoursplit[0]) numberflip('#hourl',hoursplit[0]); if(prevhoursplit[1] != hoursplit[1]) numberflip('#hourr',hoursplit[1]); }; if(prevmins != mins) { var prevmins = prevmins + "" var minsplit = mins.split(""); var prevminsplit = prevmins.split(""); if(prevminsplit[0] != minsplit[0]) numberflip('#minl',minsplit[0]); if(prevminsplit[1] != minsplit[1]) numberflip('#minr',minsplit[1]); }; if(prevsecs != secs) { var prevsecs = prevsecs + "" var secsplit = secs.split(""); var prevsecsplit = prevsecs.split(""); if(prevsecsplit[0] != secsplit[0]) numberflip('#secl',secsplit[0]); if(prevsecsplit[1] != secsplit[1]) numberflip('#secr',secsplit[1]); }; function numberflip(which,number){ if(number != 0) $(which).animate({marginTop: '-'+parseInt((number*28),10)+'px'}, 1000, 'linear'); if(number == 0) { var getmargin = parseInt(($(which).css('margin-top')), 10); $(which).animate({marginTop: parseInt((getmargin-24),10)+'px'}, 500, 'linear', function(){ $(this).css("margin-top","0px") }); }; }; setTimeout(function(){checktime(hour,mins,secs);}, 1000); }; checktime(00,00,00); $('#wrap').animate(1000); });
Html:
Code:

1 2 3 4 5 6 7 8 9 10 11 <div id="wrap"> <img id="hourl" class="time" src="fonctions/gas_compteur_jquery/nums2.png" alt="nombre de litre economisé a ce jour" /> <img id="hourr" class="time" src="fonctions/gas_compteur_jquery/nums10.png" alt="nombre de litre economisé a ce jour" /> <img id="minl" class="time" src="fonctions/gas_compteur_jquery/nums6.png" alt="nombre de litre economisé a ce jour" /> <img id="minr" class="time" src="fonctions/gas_compteur_jquery/nums10.png" alt="nombre de litre economisé a ce jour" /> <img id="secl" class="time" src="fonctions/gas_compteur_jquery/nums6.png" alt="nombre de litre economisé a ce jour" /> <img id="secr" class="time" src="fonctions/gas_compteur_jquery/nums10.png" alt="nombre de litre economisé a ce jour" /> </div>
Il me manque donc le calcul avec comme tu l'a dis ma variable de départ (date), le temps écoulé depuis cette variable, et mon indice d'incrémentation.

C'est la ou ca se corse pour moi, débutant :roll:

Citation:

Envoyé par neo18045

A revérifier car je ne suis pas très très sûre des calcul :mouarf:

Voilà ma page complète de test :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
    <head>
        <title>TEST</title>
        <script type="text/javascript">
            // la date de début du compteur (avec mois-1)
            var date = new Date(2010,5,29);
            // la date de maintenant
            var now = new Date();
            // le nombre de départ
            var number = 200000;
            // l'incrément
            var increment = 2;
            // le nombre de seconde
            var second = 3;
            // nombre total de seconde depuis la date de départ
            var secondTotal = (now.getTime()-date.getTime())/1000;
            // incrément total
            var incrementTotal = (secondTotal/3)*2;
            // nombre total arrondie
            number = Math.round(number+incrementTotal);
            function init(){
                document.getElementById("monNombre").innerHTML = number;
                // appel de la fonction d'incrémentation toutes les x secondes
                setInterval('incrementation()',second*1000);
            }
            function incrementation(){
                number = number+increment;
                document.getElementById("monNombre").innerHTML = number;
            }
        </script>
    </head>
    <body onload="init();">
        <span id="monNombre"></span> Litre(s)
    </body>
</html>

neo18045 merci beaucoup c'est exactement ce que je recherchais a faire.
Je vais l'adapter a mon code citer plus haut pour avoir l'effet graphique désiré grâce a la fonction animate en Jquery bref c'est une autre histoire...
:ccool: