Sauver valeur compteur Javascript

Version imprimable

Bonjour à tous,

Alors voilà, j'ai réalisé le compteur de la dette belge qui s’incrémente à chaque seconde, j'aimerais que ce nombre soit sauvegarder dans une base de données, ce qui implique qu'il doit etre sauvegarder à chaque seconde... Parce que pour le moment le chiffre revient à son nombre inital à chaque rafraichissement...
Mais comment faire ? Utiliser ajax pour appeler un fichier php ?
Cela ne va pas perturber la fluidité de mon site web ?

Voici mon script :
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 function format(number) { number=''+Math.round(number); if(number.length>3){ var mod = number.length % 3; var output = (mod>0?(number.substring(0,mod)):''); for(var i=0;i<Math.floor(number.length/3);i++){ if((mod==0)&&(i==0))output+=number.substring(mod+3*i,mod+3*i+3); else output+='.'+number.substring(mod+3*i,mod+3*i+3); } return(output); }else return number; } var CurrentNumber = 361618312416; function Increment() { var Number = 453; CurrentNumber = Math.floor(CurrentNumber + Number); Timer = document.getElementById("number"); Timer.innerHTML = format(CurrentNumber) + " €"; } window.setInterval("Increment()", 1000);
Si vous avez d'autres solutions n'hésitez pas...

Un grand merci !

17/10/2012, 12h39
SpaceFrog

bdd => server
=> ajax

par contre toutes les secondes c'est un peu trop court
on table en général sur 3 secondes pour les ajax itératifs

Alors voilà ce que j'ai fait pour le moment, mais cela ne fonctionne pas le chiffre stocké dans la base de donées est toujours : 2147483647 je comprend pas, peut-être que vous pourrez m'éclairer :

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
 
 
function saveNumber(number){
	// The XMLHttpRequest object
	var xmlHttp;
	try{
		xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
	}
	catch (e){
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}
		catch (e){
			try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("Your browser does not support AJAX.");
				return false;
			}
		}
	}
 
	xmlHttp.onreadystatechange = function (){ 
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") 
            eval(xmlHttp.responseText); 
    }
 
	var url = "file.php";
 
	xmlHttp.open("POST", url, true); 
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); 
    xmlHttp.send("current="+number); 
    return true; 
}
 
function format(number)
{
	number=''+Math.round(number);
	if(number.length>3){
		var mod = number.length % 3;
		var output = (mod>0?(number.substring(0,mod)):'');
		for(var i=0;i<Math.floor(number.length/3);i++){
			if((mod==0)&&(i==0))output+=number.substring(mod+3*i,mod+3*i+3);
			else output+='.'+number.substring(mod+3*i,mod+3*i+3);
		}
		return(output);
	}else return number;
}
 
var CurrentNumber = 361618312416;
 
function Increment() {
 
var Number  = 453;
 
CurrentNumber = Math.floor(CurrentNumber + Number);
 
Timer = document.getElementById("number");
 
Timer.innerHTML = format(CurrentNumber) + " €";
 
saveNumber(CurrentNumber);
 
}
 
window.setInterval("Increment()", 1000);

file.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php
 
if (isset($_POST['current']) && is_numeric($_POST['current']))
{ 
        $number = $_POST['current']; 
        $con = mysql_connect("localhost", "xxxxxx", "xxxxxx");
        mysql_select_db("xxxxxxx", $con);
        
        mysql_query("UPDATE we_debtnumber SET number=$number WHERE id='1'");
        
        mysql_close($con);
}
?>

Merci !

17/10/2012, 14h08
Bovino
Code:

var Number = 453;

:nono:

Malheureux ! Number est déjà le nom d'un objet natif de JavaScript !
Code:

1 2 if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") eval(xmlHttp.responseText);
:cry:
eval is evil !!! Surtout sur le retour d'une requête AJAX ! En plus, comme ton script file.php semble ne rien renvoyer, cette ligne est uniquement utile à ceux qui pirateraient ton serveur...
17/10/2012, 14h23
vbaguet

Ok c'est noté mais je met quoi à la place du eval ?

Et mon problème reste le meme au sujet de la BDD...
17/10/2012, 14h41
vbaguet

Pour la base de données, c'est ok. J'avais oublié de mettre mon nombre en double...

Donc maintenant le nombre de ma base de donnees s'incremente correctement toutes les secondes. Mon problème maintenant est de recuperer ce nombre pour l'afficher dynamiquement avec ajax...

Voici mon script pour l'instant:

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
 
function saveNumber(nombre){
	// The XMLHttpRequest object
	var xmlHttp;
	try{
		xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
	}
	catch (e){
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}
		catch (e){
			try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("Your browser does not support AJAX.");
				return false;
			}
		}
	}
 
	xmlHttp.onreadystatechange = function (){ 
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
	{}
    }
 
	var url = "http://www.holding-paragon.com/wecitizens/file.php";
 
	xmlHttp.open("POST", url, true); 
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); 
    xmlHttp.send("current="+nombre); 
    return true; 
}
 
function format(object)
{
	object = '' + Math.round(object);
	if(object.length > 3)
	{
		var mod = object.length % 3;
		var output = (mod > 0 ?(object.substring(0,mod)): '');
		for(var i=0; i<Math.floor(object.length/3); i++)
		{
			if((mod==0)&&(i==0))
			{
				output+=object.substring(mod+3*i,mod+3*i+3);
			}
			else
			{
				output+='.'+object.substring(mod+3*i,mod+3*i+3);
			}
		}
		return(output);
	}
	else
	{
		return object;
	}
}
 
function getNumber(){
	// The XMLHttpRequest object
	var xmlHttp;
	try{
		xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
	}
	catch (e){
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}
		catch (e){
			try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("Your browser does not support AJAX.");
				return false;
			}
		}
	}
 
	xmlHttp.onreadystatechange = function (){ 
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
		{
			var finalNumber = Number(xmlHttp.responseText);
			var timer = document.getElementById("number");
			timer.innerHTML = format(finalNumber) + " €";
			var newNumber = finalNumber + 453;
			saveNumber(newNumber);
		}
 
    }
 
	var url = "http://www.holding-paragon.com/wecitizens/file2.php";
 
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
 
}
 
window.setInterval("getNumber()", 1000);

Malheureusement cela ne fonctionne pas très bien. En effet le chiffre du compteur diminue parfois, on dirait que le chiffre stocké dans la bdd et la chiffre dans le compteur ajax sont différents...
A mon avis la méthode que j'utilise est pas bonne il faudrait sauver dans la base de données toutes les 5 secondes par exemple mais comment faire ?

Autre chose j'aimerais que le compteur démarre à 20.000.000 mais si je modifie directement dans la bdd la valeur repasse directement à une chiffre inférieur, je ne comprend pas... alors qu'il faudrait que ce chiffre passe à 20.000.453 :/

18/10/2012, 12h38
SpaceFrog

pour ce genre de script, il serait plus pertinent d'avoir un page coté serveur qui renvoie une valeur à un instant t et incrémenter cette valeur au moyen d'un script js
Ainsi à chaque rechargement de page tu repars d'une valeur actualisée..
18/10/2012, 13h19
vbaguet

Vous pourriez etre un peu plus précis ?

Donc juste deux fichiers, un php un js. Et le lien entre les deux ?
18/10/2012, 13h25
SpaceFrog
Un seul fichier suffit
Sur ta page tu fais juste un echo de ta valeur, calculée à partir de la date et de l'heure ... pour passer au script js la la valuer de départ
Code:

1 2 3 4 5 6 7 <?php $starval= // calcul savant qui retourne la valuer de depart ?> <script type="text/javascript"> var startvalue=<?php echo $startval; ?>; //et ici ton script js d'incrémentaiton ...
18/10/2012, 13h29
vbaguet

J'y vois deja un peu plus clair, mais pourquoi ai-je besoin de la date et de l'heure ? Et dans cette meme page je peux sauver la valeur dans la BDD ?
18/10/2012, 13h42
SpaceFrog

tu peux mettre cette valeur en BDD si tu veux, mais d'après ce que je comprends tout le monde doit à un instant t partir de la même valeur non ?
18/10/2012, 13h48
vbaguet

En fait le compteur ne doit jamais s'arreter. C'est le compteur de la dette. Donc si un utilisateur vient 1 mois plus tard, la dette sera nettement supérieure à celle qu'il a vu un mois avant...
18/10/2012, 14h05
SpaceFrog

donc il te suffit de calculer la valeur de depart à partir de la date et heure coté serveur ...

J'ai fait comme ceci mais j'ai un chiffre negatif xD ca me semble correct pourtant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
var dateOrigine = new Date(2012,10,1); // Pour 1 octobre 2012
var detteOrigine = 3000000;
var increment = 453; // chaque seconde ta dette augmente de 453 unités
 
function augmenteDette()
{
    var now = new Date();
    // nombres de millisecondes écoulées entre maintenant et la date d'origine
    var deltamillisecondes = now.getTime() - dateOrigine.getTime();
    // on calcul notre nouvelle dette
    var nouvelleDette = detteOrigine + (deltamillisecondes/1000)*increment;
	var timer = document.getElementById("debt");
	timer.innerHTML = nouvelleDette;
}
 
window.setInterval("augmenteDette()", 1000);

Ou est le soucis ? Je crois que je touche au but...

je conseillerais cependant de partir d'une valuer calulée par le serveur a un instant t

là tu te bases sur la date locale qui peut ne pas etre bonne !!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function augmenteDette()
{
    var now = new Date();
    // nombres de millisecondes écoulées entre maintenant et la date d'origine
    var deltamillisecondes = now.getSeconds() - dateOrigine.getSeconds();
    // on calcul notre nouvelle dette
    var nouvelleDette = detteOrigine + deltamillisecondes*increment;
	var timer = document.getElementById("debt");
	timer.innerHTML = nouvelleDette;
}
 
function launch(){
foo=setInterval(augmenteDette, 1000);
}

Code:

1
2
<body onload="launch()">
<div id="debt"></div>

Un grand merci de ta patience tout fonctionne parfaitement :

Mon script pour ceux que ca interesse :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
var dateOrigine = new Date(18,10,2012); 
var detteOrigine = 361618312416;
var increment = 453; 
 
function augmenteDette()
{
    var now = new Date();
    // nombres de millisecondes écoulées entre maintenant et la date d'origine
    var deltamillisecondes = now.getSeconds() - dateOrigine.getSeconds();
    // on calcul notre nouvelle dette
    var nouvelleDette = detteOrigine + deltamillisecondes*increment;
	var timer = document.getElementById("debt");
	timer.innerHTML = format(nouvelleDette) + " €";
}
 
currentDebt = setInterval(augmenteDette, 1000);