Horloge en javascript

Version imprimable

Bonjour, je cherche a faire une horloge en javascript, je me suis don tournée vers le faq, j'ai trouver mon bonheur, mon souci c'est que j'ai voulu le faire moi meme .. je ne sais pourquoi, mais du coup j'ai totu qui fonctionne sauf les secondes ... ca m'affiche NaN pour les secondes

Pourquoi ?
Code:

1 2 3 <input id="time" /> <div id="time2"></div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function clock() { //définition de la date - heure - minutes - seconde jour = new Date(); heure = jour.getHours(); minutes = jour.getMinutes(); seconds = jour.setSeconds(); valeurheure = heure; valeurheure += ((minutes < 10) ? ":0" : ":") + minutes; valeurheure += ((seconds < 10) ? ":0" : ":") + seconds; document.getElementById("time").value = valeurheure; document.getElementById("time2").innerHTML = jour; timerRunning = true; } timerID = setInterval(clock,1000);
Merci.

30/04/2008, 00h27
tavarlindar

setSeconds ou getSeconds ?
30/04/2008, 00h29
mimagyc

ha ... :aie:

bon bah merci ^^

(c'est getSeconds)

je réouvre le topic car je n'arrive pas a faire en sorte que l'heur afficher soit l'heure du serveur et non du client...

Voici le code acutellement :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
function clock() {
	//dÃ©finition de la date - heure - minutes - seconde
	jour = new Date();
	heure = jour.getHours();
	minutes = jour.getMinutes();
	seconds = jour.getSeconds();
	valeurheure = ((heure < 10) ? "0" : "") + heure ;
 
	valeurheure += ((minutes < 10) ? ":0" : ":") + minutes;
	valeurheure += ((seconds < 10) ? ":0" : ":") + seconds;
 
             //Insertion de lheur dans la balise DIV
	document.getElementById("time").innerHTML = valeurheure;
 
	timerRunning = true;
}
 
timerID = setInterval(clock,1000);

06/05/2008, 17h11
mimagyc

je réactualise le topic ... dsl
06/05/2008, 17h18
SpaceFrog

ben lance un ajax sur le serveur pour récupérer la date serveur ...

je crois qu'il doit y avoir un truc dasn les contributions ou la afq d'une horloge sychronisée serveur ...
06/05/2008, 22h02
Sacha999
Si tu code en php, tu recupere la date du serveur dans ton code php, et tu initialise une date javascript avec cette valeur
Code:

1 2 jour = new Date();
Code:

1 2 <?php echo 'jour = new Date('.date('Y,m,d,H,i,s').');';?>
A tester quoi
06/05/2008, 22h45
mimagyc

j'en suis arriver la , hors ta solution ne fonctionne pas instantanément,

http://mimagyc.free.fr/groupe/

Je n'ai rien trouver sur la FAQ ... :aie:
07/05/2008, 09h15
SpaceFrog

et dasn le forum ?
http://www.developpez.net/forums/showthread.php?t=73356
07/05/2008, 21h03
mimagyc

Erf oui ... :mrgreen:

merci

edit : ... et non ... c'est l'heure client... :?

bon et bien ce que j'ai fait, c'est de l'ajax, donc je lance toute les seconde un script php qui récupéré l'heure bêtement ....

Mais ... cela ne fonctionne pas sous IE ...

voici le code index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test horloge</title>
<link href="basic.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="javascript.js"></script>
</head>
 
<body>
<div id="date"></div>
<div id="horloge"></div> 
 
</body>
</html>

le java

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
 
function file(fichier)
     {
     if(window.XMLHttpRequest) // FIREFOX
          xhr_object = new XMLHttpRequest();
     else if(window.ActiveXObject) // IE
          xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
     else
          return(false);
     xhr_object.open("GET", fichier, false);
     xhr_object.send(null);
     if(xhr_object.readyState == 4) return(xhr_object.responseText);
     else return(false);
     }
 
function horloge() {
	heure = file("horloge.php");
	if (heure != false) {
		document.getElementById("horloge").innerHTML = heure;
	}
	else
	{
		document.getElementById("horloge").innerHTML = "erreur dans le code, veuillez contacter l'administrateur.";
	}
}
 
timerID = setInterval(horloge,1000);
 
function datee () {
dates = new Date();
journe = dates.getDate();
mois = (((dates.getMonth()+1) <10) ? "0" : "") + (dates.getMonth()+1);
mois = journe +"/"+ mois;
annee = mois +"/"+ dates.getYear();
 
document.getElementById("date").innerHTML = annee;
}
 
dateID = setInterval(datee,1000);

et le fichier php qui est demander pour avoir l'heure du serveur toute les seconde :

Code:

1
2
3
4
5
6
7
8
9
10
 
<?php
 
$heure = date("H");
$minute = date("i");
$seconde = date("s");
 
echo $heure.":".$minute.":".$seconde;
 
?>

Merci.

08/05/2008, 12h02
mimagyc

un petit rappel : il ne marche toujours pas sous IE, et
l'horloge se met a jour toute les 2 seconde .. et pas toute les seconde !! 8O

http://mimagyc.free.fr/groupe/

Merci.
09/05/2008, 09h27
mimagyc

Je me permet une fois de plus d'actualiser le sujet ... :?
10/05/2008, 13h54
Sacha999

Inverse le "if" de Firefox et IE, car IE execute quand même ce que tu as dans le "if" de FF au lieu de lancer son "if"

Pour l'histoire du decalage, ca doit etre le temps du traffic reseau et tout. Tu devrais plutot prendre l'heure sur le serveur juste 1 fois au chargement, puis en javascript coté client, tu incrément de 1sec toutes les secondes.
Apres tout, 1 seconde sur ton PC et 1 seconde sur le serveur, c'est la même durée, ca sert pas à grand chose de recuperer chaque seconde d'une serveur
Et si tu doute, rien ne t'empeche de re-récuperer la date du serveur toutes les 10 minutes

je vois,
mais tu ne pense pas que ma facon de récupéré l'heure en php n'est pas la meilleur, je veu dire par la que je suis obliger de hacher l'heure par les ":" en javascript, je peu peut etre le faire directement via le php ...

enfin je vai bien voir ^^

merci.

edit :
voila sur quoi je suis partis actuellement, c'est jsute un principe pour l'instant ... enfin j'ai pas vérifier si ca marchai quoi ^^

mais il me vien un souci, comment faire pour demander que une seul fois,
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function horloge() { var heure = file("horloge.php"); if (heure != false) { heurere = heure.split(':'); heure = heurere[0]; minute = = heurere[1]; seconde = = heurere[2]; return heure; return minute; return seconde; } else { document.getElementById("horloge").innerHTML = "erreur dans le code, veuillez contacter l'administrateur."; } } function horlogeclient () { horloge(); // cette fonction devrai etre demander que une seul fois ...? }
Merci.

11/05/2008, 00h02
Sacha999

Pour demander qu'une fois, tu execute la fonction dans le "onload" du <body>, elle sera lancé quand la page aura fini de chargé.

Concernant le principe, je pense que récupere 1 fois plutot que d'appeler le serveur tous les secondes, c'est plus optimisé, moins lourd, et plus propre. Ce que tu cherches toi à la base c'est d'avoir l'heure sur le serveur, des que tu l'as a l'instant T, c'est bon, apres te reste a manipuler l'heure pour simuler une horlorge, le javascript est parfait pour ca.

J'ai un peu de mal, et surtout je ne sais pas comment mis prendre pour récupéré l'heure une seul fois, et ensuite faire tournée l'horloge sans quel redemande l'heure en php ...

voila ce que j'ai pu faire ... bien sur ca ne marche pas ... suis je dans la bonne direction ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test horloge</title>
<link href="basic.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="javascript.js"></script>
<?php
$heure = date("H");
$minute = date("i");
$seconde = date("s");
?>
</head>
 
<body onload="horlogephp(<?php echo $heure ?>,<?php echo $minute ?>,<?php echo $seconde ?>)," onload="datee()">
 
<div id="date"></div>
<div id="horloge" ></div> 
<div> Premier heure : <?php echo $heure.":".$minute.":".$seconde ; ?></div>
 
</body>
</html>

javascript :

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 horlogephp (heure,minute,seconde) {
 
	heures = getHours(heure);
	minutes = getMinutes(minute);
	secondes = getSeconds(seconde);
	alert("marche");
	valeurheure = ((heures < 10) ? "0" : "") + heures ;
 
	valeurheure += ((minutes < 10) ? ":0" : ":") + minutes;
	valeurheure += ((secondes < 10) ? ":0" : ":") + secondes;
 
	document.getElementById("horloge").innerHTML = valeurheure;
 
	timerRunning = true;
 
}
 
 
timerID = setInterval(horlogephp,1000);
 
function datee () {
var dates = new Date();
var journe = dates.getDate();
var mois = (((dates.getMonth()+1) <10) ? "0" : "") + (dates.getMonth()+1);
var mois = journe +"/"+ mois;
var annee = mois +"/"+ dates.getYear();
 
document.getElementById("date").innerHTML = annee;
}

je ne sais pas comment mis prendre a ce niveau la :

Code:

1
2
 
heures = getHours(heure);

dois je tout de meme faire un new Date(); avant ? ou bien vu que je me calle sur l'heure du serveur .. je n'en ai pas besoin ?

merci pour vos réponse! :)

edit : quand je fait dans la function horlogephp(), un alert(heure+":"+minute+":"+seconde); , j'ai bien l'heure qui s'affiche.

Lorsque je rajoute un new Date(); j'ai l'heure client :cry:

Si après ca marche pas, je peux plus rien faire

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>
		<script language="javascript" type="text/javascript"> 
			//var _maintenant = new Date();
			var heures = <?php date("H");?> ;//_maintenant.getHours();
			var minutes = <?php date("i");?> ;//_maintenant.getMinutes();
			var secondes = <?php date("s");?> ;//_maintenant.getSeconds();
 
			function horlogephp () {
				secondes += 1;
				if (secondes >= 60)
				{
					secondes = 0;
					minutes += 1;
				}
 
				if (minutes >= 60)
				{
					minutes = 0;
					heures += 1;
				}
 
				if (heures >= 24)
					heures = 0;
 
 
				valeurheure = ((heures < 10) ? "0" : "") + heures ;
				valeurheure += ((minutes < 10) ? ":0" : ":") + minutes;
				valeurheure += ((secondes < 10) ? ":0" : ":") + secondes;
 
				document.getElementById("horloge").innerHTML = valeurheure;
			}
 
			setInterval(horlogephp, 1000);
		</script>	
	</head>
	<body> 
		<div id="horloge"></div>
	</body>
</html>

11/05/2008, 14h11
mimagyc

en copiant bêtement ton code, j'ai rien qui s'affiche, et avec IE, erreur a la ligne 5 ...

je vais essayer ta façon autrement ^^

Merci encore.

Bon me suis planté sur le code en PHP, j'ai donc décidé d'installé EasyPHP juste pour être sur que ca fonctionne, et après modification, ca fonctionne !! Donc si après ca, ca ne marche plus, la je peux plus rien !!!

Code à remplacer
Code:

1 2 3 4 var heures = <?php echo date("H");?> ;//_maintenant.getHours(); var minutes = <?php echo date("i");?> ;//_maintenant.getMinutes(); var secondes = <?php echo date("s");?> ;//_maintenant.getSeconds();

11/05/2008, 17h22
mimagyc

voila que ca marche sous IE mais pas FF .. :evilred:

http://mimagyc.free.fr/groupe/

la page index.php n'est pas la même -_-, comme si FF lisait l'ancien fichier ...

et tout marche en local , sous IE et FF, sur l'hébergeur, ca marche avec IE mais pas FF ...

Merci.

edit :
bon et bien en fait non .., il fallait faire joindre le fichier .js apres le script javascript de la page index.php ...

Merci encore a vous tous ;)