Gestion des décimales

**thipyt** · 31/01/2011, 12h10

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 31/01/2011, 13h07

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript">

idem pour la balise STYLE

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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>

**thipyt** · 31/01/2011, 14h32

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

**NoSmoking** · 31/01/2011, 19h02

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Gestion des décimales

JavaScript

Discussions similaires

Partager

Partager