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