split - function avec image

**mimagyc** · 12/05/2008, 22h53

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**htr999** · 12/05/2008, 23h52

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

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

a+

**htr999** · 13/05/2008, 00h15

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

!.!

**Matthieu2000** · 13/05/2008, 18h26

teste l'apres-midi ca marchera...
sino fais un boucle for sur la taille de ton tableau ...

**mimagyc** · 13/05/2008, 21h30

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.

**htr999** · 13/05/2008, 21h34

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

**mimagyc** · 13/05/2008, 21h45

voici le code complet
fichier php

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

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

**htr999** · 13/05/2008, 22h03

a premiere vue, je ne vois o� est appel�e ta principale fonction horlogephp() ...

deuxi�mement, pourquoi ce bout de code

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**mimagyc** · 13/05/2008, 22h11

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 :

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

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

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

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

**htr999** · 13/05/2008, 22h27

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

essaie ceci
PHP

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

JS

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

**mimagyc** · 13/05/2008, 22h29

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

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.

**htr999** · 13/05/2008, 22h32

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

sinon pour le pb de l'image, ca vient de la fonction

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

function img(num) {

ou

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

function image(num) {

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

boncourage

**htr999** · 13/05/2008, 22h35

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

split - function avec image

JavaScript

Discussions similaires

Partager

Partager