Horloge en javascript

**mimagyc** · 29/04/2008, 23h50

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 :

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

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

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

**tavarlindar** · 30/04/2008, 00h27

setSeconds ou getSeconds ?

**mimagyc** · 30/04/2008, 00h29

ha ...

bon bah merci ^^

(c'est getSeconds)

**mimagyc** · 05/05/2008, 16h26

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 :

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

**mimagyc** · 06/05/2008, 17h11

je réactualise le topic ... dsl

**SpaceFrog** · 06/05/2008, 17h18

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

**Sacha999** · 06/05/2008, 22h02

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 :

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

1
2
 
jour = new Date();

Code :

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

1
2
 
<?php echo 'jour = new Date('.date('Y,m,d,H,i,s').');';?>

A tester quoi

**mimagyc** · 06/05/2008, 22h45

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

**SpaceFrog** · 07/05/2008, 09h15

et dasn le forum ?
http://www.developpez.net/forums/showthread.php?t=73356

**mimagyc** · 07/05/2008, 21h03

Erf oui ...

merci

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

**mimagyc** · 07/05/2008, 23h37

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 :

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

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

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

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.

**mimagyc** · 08/05/2008, 12h02

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

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

Merci.

**mimagyc** · 09/05/2008, 09h27

Je me permet une fois de plus d'actualiser le sujet ...

**Sacha999** · 10/05/2008, 13h54

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

**mimagyc** · 10/05/2008, 22h04

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 :

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

**Sacha999** · 11/05/2008, 00h02

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.

**mimagyc** · 11/05/2008, 12h41

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 :

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

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

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

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

**Sacha999** · 11/05/2008, 13h23

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

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

**mimagyc** · 11/05/2008, 14h11

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.

**Sacha999** · 11/05/2008, 14h59

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 :

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

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();

Horloge en javascript

JavaScript

Discussions similaires

Partager

Partager