split - function avec image

Version imprimable

Bonsoir, je cherche a décomposer un chiffre qui sera forcement a 2 chiffre .
et j'ai fait des image de chaque chiffre étant donner que j'arrive pas a utiliser une police spécial.

voici ce que j'ai fait et ca ne fonctionne pas forcement :roll:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 valeurheure = valeurheure.split(""); horloge = image(valeurheure[0]); horloge = horloge+""+image(valeurheure[1]); document.getElementById("horloge").innerHTML = horloge; function image(num) { image = '<img src="horloge/'+num+'.png" />'; return image; }
et lorsque je supprime la ligne horloge = horloge+""+image(valeurheure[1]); , ca fonctionne(sous FF et pas IE) .... (donc un chiffre) .

Merci.

edit : et de plus, les image ne change pas en fonction de l'horloge

j'ai pensé bêtement à une division
14 -> 1~14/10 et 4~14%10
voici un code complet que tu pourrais essayer

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
<head>
<script>
function affiche(){
	var today = new Date();
	var heu = today.getHours();
	var min = today.getMinutes();
	var sec = today.getSeconds();
 
	var heu0 = parseInt(heu/10);
	var heu1 = heu%10;
	var min0 = parseInt(min/10);
	var min1 = min%10;
	var sec0 = parseInt(sec/10);
	var sec1 = sec%10;
 
	var txt = img(heu0)+" "+img(heu1)+" : "+img(min0)+" "+img(min1)+" : "+img(sec0)+" "+img(sec1);
 
	var elemDivHorloge = document.getElementById("horloge");
	elemDivHorloge.innerHTML = txt;
 
	setTimeout(affiche,1000);
}
 
function img(chf){
	txt = "<img src='horloge/"+chf+".png' alt='"+chf+"'/>";
	return txt;
}
</script>
</head>
 
<body onload="affiche();">
<div id="horloge"></div>
</body>

pour la solution avec Split, ce sera un peu plus long car il faut gérer le cas où l'heure (min, sec) < 10. dans ces cas là, ton heure (min,sec) ne contient qu'un chiffre, donc il faudrait ajouter un "0" devant.
Code:

1 2 3 4 5 6 7 8 9 heu = (heu >= 10)? heu.toString() : "0"+heu.toString(); min = (min >= 10)? min.toString() : "0"+min.toString(); sec = (sec >= 10)? sec.toString() : "0"+sec.toString(); heu = heu.split(""); min = min.split(""); sec = sec.split(""); var txt = img(heu[0])+" "+img(heu[1])+" : "+img(min[0])+" "+img(min[1])+" : "+img(sec[0])+" "+img(sec[1]);
le reste pas touche 8-) !.!

13/05/2008, 18h26
Matthieu2000

teste l'apres-midi ca marchera...
sino fais un boucle for sur la taille de ton tableau ...
13/05/2008, 21h30
mimagyc

merci pour vos reponse, mais grossierement, c'est le meme principe que moi sauf que toi, les image se charge bien chaque seconde et pas moi ..

pourquoi ?

Merci.
13/05/2008, 21h34
htr999

sans ton code complet ça va être difficile de comparer. Mais je suppose que tu te bloque sur la répétition de chaque seconde.
si c'est le cas, c'est ce qui fait la fonction setTimeout(affiche,1000);

voici le code complet
fichier php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!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"> 
var heures = <?php echo date("H");?> ;
var minutes = <?php echo date("i");?> ;
var secondes = <?php echo date("s");?> ;
</script>
<script language="javascript" type="text/javascript" src="javascript.js"></script>
 
</head>
<body onload="datee()">
 
<div id="date"></div>
<div id="horloge"></div> 
 
</body>
</html>

le fichier JS

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
 
function image(num) {
 
	image = '<img src="horloge/'+num+'.png" />';
	return image;
 
}
 
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 ;
				valeurminutes = ((minutes < 10) ? "0" : "") + minutes;
				valeursecondes = ((secondes < 10) ? "0" : "") + secondes;
 
				//valeurheure = ((heures < 10) ? "0" : "") + heures ;
				//valeurheure += ((minutes < 10) ? ":0" : ":") + minutes;
				//valeurheure += ((secondes < 10) ? ":0" : ":") + secondes;
 
 
				valeurheure = valeurheure.split("");
				horloge = image(valeurminutes[0]);
				horloge = horloge+""+image(valeurheure[1]);
 
				document.getElementById("horloge").innerHTML = horloge;
			}
 
			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;
}

Merci.

13/05/2008, 22h03
htr999
a premiere vue, je ne vois où est appelée ta principale fonction horlogephp() ...

deuxièmement, pourquoi ce bout de code
Code:

1 2 3 var heures = <?php echo date("H");?> ; var minutes = <?php echo date("i");?> ; var secondes = <?php echo date("s");?> ;
on pourrait tres bien obtenir l'heure courante avec du javascript !.!

troisieme, est-qu'il est compréhensible mon code plus haut ?.? est-que tu peux en tirer partie ?.?

Le bout de code en php, c'est pour obtenir l'heure serveur.
et oui ton code m'aide ^^

mais malgré cela, je n'y arrive toujours pas ^^

voici ou j'en suis :
fichier php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!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"> 
var heures = <?php echo date("H");?> ;
var minutes = <?php echo date("i");?> ;
var secondes = <?php echo date("s");?> ;
</script>
<script language="javascript" type="text/javascript" src="javascript.js"></script>
 
</head>
<body onload="horlogephp()">
 
<div id="date"></div>
<div id="horloge"></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
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
 
function image(num) {
 
	txt = "<img src='horloge/"+chf+".png' alt='"+chf+"'/>";
	return txt;
 
}
 
function horlogephp() {
				secondes += 1;
				if(secondes >= 60)
				{
					secondes = 0;
					minutes += 1;
				}
 
				if(minutes >= 60)
				{
					minutes = 0;
					heures += 1;
				}
 
				if(heures >= 24)
				{
					heures = 0;
				}
 
				heu = ((heures < 10) ? "0" : "") + heures ;
				mins = ((minutes < 10) ? "0" : "") + minutes;
				sec = ((secondes < 10) ? "0" : "") + secondes;
 
 
	var heu0 = parseInt(heu/10);
	var heu1 = heu%10;
	var min0 = parseInt(mins/10);
	var min1 = mins%10;
	var sec0 = parseInt(sec/10);
	var sec1 = sec%10;
 
	var txt = img(heu0)+" "+img(heu1)+" : "+img(mins0)+" "+img(mins1)+" : "+img(sec0)+" "+img(sec1);
 
	var elemDivHorloge = document.getElementById("horloge");
	elemDivHorloge.innerHTML = txt;
 
	setTimeout(horlogephp,1000);
			}
 
			//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;
}

ca a l'air de bloquer ici

Code:

1
2
 
var txt = img(heu0)+" "+img(heu1)+" : "+img(mins0)+" "+img(mins1)+" : "+img(sec0)+" "+img(sec1);

et le setTimeout(horlogephp,1000); ne fonctionne pas .. :(

Merci.

edit:

et comme ceci ca fonctionne, mais forcement je n'ai pas les image ^^

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
 
function horlogephp() {
				secondes += 1;
				if(secondes >= 60)
				{
					secondes = 0;
					minutes += 1;
				}
 
				if(minutes >= 60)
				{
					minutes = 0;
					heures += 1;
				}
 
				if(heures >= 24)
				{
					heures = 0;
				}
 
				heu = ((heures < 10) ? "0" : "") + heures ;
				mins = ((minutes < 10) ? "0" : "") + minutes;
				sec = ((secondes < 10) ? "0" : "") + secondes;
 
 
	var heu0 = parseInt(heu/10);
	var heu1 = heu%10;
	var mins0 = parseInt(mins/10);
	var mins1 = mins%10;
	var sec0 = parseInt(sec/10);
	var sec1 = sec%10;
 
	var txt = img(heu0)+" "+img(heu1)+" : "+img(mins0)+" "+img(mins1)+" : "+img(sec0)+" "+img(sec1);
	//var txt = heu0+" "+heu1+" : "+mins0+" "+mins1+" : "+sec0+" "+sec1;
// alert("marche");
	var elemDivHorloge = document.getElementById("horloge");
	elemDivHorloge.innerHTML = txt;
 
	setTimeout(horlogephp,1000);
			}

j'arrive à comprendre ce que tu veux, c'est l'horloge serveur !.! :P

essaie ceci
PHP

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
<!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">
var heures, minutes, secondes;
function heureServ(){
	heures = <?php echo date("H");?> ;
	minutes = <?php echo date("i");?> ;
	secondes = <?php echo date("s");?> ;
}
</script>
<script language="javascript" type="text/javascript" src="javascript.js"></script>
 
</head>
<body onload="heureServ(); datee(); horlogephp();">
 
<div id="date"></div>
<div id="horloge"></div> 
 
</body>
</html>

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
function img(num) {
	var image = '<img src="horloge/'+num+'.png" alt='+num+' />';
	return image;
}
 
function horlogephp() {
	secondes += 1;
 
	if (secondes >= 60){
		secondes = 0;
		minutes += 1;
	}
 
	if (minutes >= 60){
		minutes = 0;
		heures += 1;
	}	
 
	if (heures >= 24){
		heures = 0;
	}
 
	h = (heures >= 10)? heures.toString() : "0"+heures.toString();
	m = (minutes >= 10)? minutes.toString() : "0"+minutes.toString();
	s = (secondes >= 10)? secondes.toString() : "0"+secondes.toString();
 
	h = h.split("");
	m = m.split("");
	s = s.split("");
 
	var txt = img(h[0])+" "+img(h[1])+" : "+img(m[0])+" "+img(m[1])+" : "+img(s[0])+" "+img(s[1]);
 
	document.getElementById("horloge").innerHTML = txt;
 
	setTimeout(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;
}

13/05/2008, 22h29
mimagyc

je n'ai aps lu ton message simplement parce que je suis bete ...j'appelle les fonction mais le nom .. et bien je l'ai mal ecrit .. ca fonctionne tres bien! ^^
juste une chose :
tou marche en local, je le met sur mon hebergeur free, ca fonctionne sous IE mais pas FF, alors que en local ca marche sous les 2 ... :aie:

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

Pourquoi ?
edit:
va falloir que je precharge les image ...

C'est bon ca fonctionne ... le temps que ca se met a jour ....je vai donc recherche comment précharger une image ^^

Merci pour tout.:king:
13/05/2008, 22h32
htr999

donc j'ai reformulé ton code. essaie de comparer ton dernier code avec ceci
j'ai l'habitude d'utiliser setTimeout, mais tu peux changer à ta guise :D
sinon pour le pb de l'image, ca vient de la fonction

Code:

function img(num) {

ou

Code:

function image(num) {

dans ton code
j'ai ajouté un petit ALT au cas où on n'arrive pas à voir les images !.!

boncourage
13/05/2008, 22h35
htr999

excuse-moi j'ai posté en même temps que toi.
sinon j'ai testé ta page, ton code marche sous IE ainsi qu'FFX

EDIT: il faut jeter un coup d'oeil sur ta page principale, elle contient des erreurs c po bien !.!