Gestion des décimales

Version imprimable

Salut à tous,

Je souhaite réaliser quelque chose d'assez basique : un compteur affichant une consommation électrique.
Sur la base d'une valeur de consommation que j'aurais calculé au préalable, par seconde, je souhaite que ma page affiche un compteur qui incrémentera chaque seconde la valeur cumulée.

J'ai récupéré un bout de code, que j'essaie d'adapter et pour lequel je ne souhaite afficher que 2 ou 3 décimales.

J'ai trouvé sur le net que "Math.round" pouvait être utilisé pour gérer ça, mais j'ai l'impression que ma façon de l'utiliser (voir ligne en commentaire, verte) n'est pas très propre...

Merci d'avance !
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 <html> <head> <title>Compteur énergétique</title> <style> * { font-size : 14pt; font-family : Calibri; } </style> <script> var compteur=0.022; // Compteur global à zéro par défaut function incremente() { // Récupère le champ compteur var cpt = document.getElementById("compteur"); cpt.value = compteur; // Incrémente le compteur global compteur=(compteur+0.022); //compteur=Math.Round((compteur+0.022)*100)/100; setTimeout("incremente()",1000); } function load() { incremente(); } </script> </head> <body onload="load();"> <form> Vous avez consommé : <input type='text' value='0' id='compteur' size='1'> W </form> </body> </html>

Bonjour,
perso je gérerais un compteur entier que je multiplierais par 0.22 à chaque fois.
Pour l'affichage propre cela peut se faire avec la méthode toFixed(), et je le fareis dasn un SPAN et non dans un INPUT
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 <html> <head> <title>Compteur énergétique</title> <style type="text/css"> * { font-size : 14pt; font-family : Calibri; } </style> <script type="text/javascript"> var iCount = 1; function incremente(){ // Récupère le champ compteur var oSpan = document.getElementById("compteur"); oSpan.innerHTML = (iCount *0.22).toFixed(2); // Incrémente le compteur global iCount ++; setTimeout( incremente, 1000); // appel direct } function Init(){ incremente(); } </script> </head> <body onload="Init();"> Vous avez consommé : <span id='compteur'></span> W </body> </html>
au passage changement dans la balise SCRIPT,il est préférable de mettre

Code:

<script type="text/javascript">

idem pour la balise STYLE

Code:

<style type="text/css">

et modification du nom de la fonction load pour une dénomination de Init par exemple

<EDIT>
l'utilisation d'un compteur associé à setTimeout avec en délai 1000 ne te garanti pas qu'au bout de 10 secondes, par exemple, tu as consommé 10*.22
</EDIT>

31/01/2011, 14h32
thipyt

Merci beaucoup pour cette réponse de grande qualité et tes conseils ! :ccool:

Citation:

<EDIT>
l'utilisation d'un compteur associé à setTimeout avec en délai 1000 ne te garanti pas qu'au bout de 10 secondes, par exemple, tu as consommé 10*.22
</EDIT>

je te livre un petit exemple pour te monter la lacune de l'utilisation d'un compteur, surtout dans ton cas

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
<html>
<head>
<title>Compteur énergétique</title>
<style type="text/css">
* {
  font-size : 14pt;
  font-family : Calibri;
}
</style>
<script type="text/javascript">
var tDeb, tNow, iCount = 0;
function incremente(){
  // Récupère le champ compteur
  var oSpan1 = document.getElementById("compteur1");
  var oSpan2 = document.getElementById("compteur2");  
  // get maintenant
  tNow = new Date().getTime();
  // calcul conso
  var Conso = (tNow -tDeb) *0.022 /1000;
  // affichage conso
  oSpan1.innerHTML = (iCount *0.022).toFixed(3);
  oSpan2.innerHTML = Conso.toFixed(3);  
  // Incrémente le compteur global
  iCount ++;    
  setTimeout( incremente, 1000);
} 	
function Init(){
  // init temps de demarrage
  tDeb = new Date().getTime();
  incremente();
}
</script>
</head>
<body onload="Init();">
<button onclick="alert('Stop !\nFin de consomation...');">Stop !</button><br>
Méthode compteur : <span id='compteur1'></span> W<br>
Méthode getTime() : <span id='compteur2'></span> W<br>
</body>
</html>

n'hésites pas à appuyer sur le bouton Stop ! et observes ce qui ce passe.