Faire clignoter un compte à rebours

Version imprimable

Bonsoir à toutes et a tous,

Je voudrais faire clignoter le texte du compte à rebours suivant:
"Il reste X jours avant la nouvelle année"

J'ai fait plusieurs tentatives en partant de deux scripts, celui du compte à rebours ( le deuxième fonctionne ), mais je n'arrive pas à le faire clignoter avec le premier code.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<script type="text/javascript"> function blink() { var toBl=document.getElementById('blink'); if (toBl.style.color=='#191970'||toBl.style.color=='rgb(25, 25, 112)') { toBl.style.color='#DC143C';//rouge } else { toBl.style.color='#191970';//bleu } } setInterval("blink()", 1000);</script>
 
 
<script language="javascript">
// PLF - http://www.jejavascript.net/
datedujour = new Date();
hdj=datedujour.getHours();
mdj=datedujour.getMinutes();
sdj=datedujour.getSeconds();
date_even = new Date(2011, 0, 01, hdj, mdj, sdj); //janv =0 > decemb =11
date1=datedujour.getTime();
date2=date_even.getTime();
nbrej= date2-date1;
nbrej= Math.round((Math.round(nbrej)/1000)/60/60/24);
document.write("Il reste "+nbrej+" avant la nouvelle année ");
</script></a></marquee></div></td></tr></table>

D'avance merci,

08/11/2010, 07h48
vermine

?! Passage à la ligne ?!
Bonjour,

En fait, votre code fonctionne excepté deux choses. Premièrement, le code HTML que nous ne voyons pas est-il correcte ?
Deuxièmement (et commençons par ça), votre fonction blink est-elle vraiment définie en une seule ligne ? Alors c'est de là que vient l'erreur. Vous avez un commentaire sur le reste de la fin de la ligne :

Code:

//rouge

Tout ce qui suit est ignoré. Réindenté votre code et ça ira mieux. ;)

Petite remarque, je vois ceci :
Code:

1 2 3 4 5 <script> ... </script> </a></marquee> ...
Vous ne devez pas mettre vos scripts dans le <body> du HTML (surtout pas dans d'autres balises) mais bien dans le <head>.

Et dernière chose, on déconseille le document.write. Pour afficher le timer ce serait mieux de modifier la valeur d'un <label>. ;)

Suite à votre message privé, voici quelques explications.

Votre page HTML devrait être un peu plus structurée :

Code:

1
2
3
4
5
6
7
8
9
10
 
<html>
<head>
Header, informations nécessaires à la page ou informations supplémentaires. Feuilles de styles et Javascript.
</head>
 
<body>
Corps de la page.
</body>
</html>

Donc chez vous ça donnerait ceci :

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
 
<html>
<head>
<script type="text/javascript"> 
function blink() 
{ 
       var toBl=document.getElementById('blink');
       
       if (toBl.style.color=='#191970'||toBl.style.color=='rgb(25, 25, 112)') 
       { 
            toBl.style.color='#DC143C';//rouge 
       } else { 
            toBl.style.color='#191970';//bleu 
       } 
} 
 
setInterval("blink()", 1000);
 
 
// PLF - http://www.jejavascript.net/
datedujour = new Date();
hdj=datedujour.getHours();
mdj=datedujour.getMinutes();
sdj=datedujour.getSeconds();
date_even = new Date(2011, 0, 09, hdj, mdj, sdj); //janv =0 > decemb =11
date1=datedujour.getTime();
date2=date_even.getTime();
nbrej= date2-date1;
nbrej= Math.round((Math.round(nbrej)/1000)/60/60/24);
document.write("Il reste "+nbrej+" jours avant le départ ");
</script>
</head>
 
<body>
<table align="center" width="1200" height="60" style="background: url('http://i51.tinypic.com/219qw7k.jpg');" border="0" cellspacing="0" cellpadding="0"><tr><td valign="bottom" style="padding: 5px;"><div style="text-align: center; padding: 10px; background:424242; border: 0px solid black;"><marquee direction="left" scrollamount="4" scrolldelay="8" onmouseover="this.stop();" onmouseout="this.start();"><b><font color="#ffffff"><font size=5><a         href="http://chiens-de-traineau.forumactif.com/les-courses-europeennes-f28/la-grande-odyssee-2011-t606.htm"><font color="white">VOUS POUVEZ ACCÉDER A LA PRÉSENTATION DE LA GRANDE ODYSSÉE 2011 EN CLIQUANT</font> <font color="red">   ICI</font> ....... </a></marquee></div></td></tr></table>
 
&nbsp;&nbsp;&nbsp;&nbsp;
 
</body>
</html>

Comme vous pouvez le constater, j'ai "mis en page" le code de la fonction blink. A savoir des passages à la lignes et des espacements pour visualiser le niveau des instructions.

Maintenant, vous utilisez des commentaires Javascript :

Code:

1
2
3
4
5
 
var test1 = 0; /* Ce commentaire a un début et une fin. Tout ce qui suit la fin sera interprété */  alert("Je suis interprété");
 
var test2 = 0; // Ce commentaire a un début mais pas de fin. Sa fin réelle est la fin de la ligne. Tout ce qui suit sur cette même ligne ne sera pas interprété alert("Je ne suis pas interprété car je suis sur la même ligne");
alert("Je ne suis pas sur la même ligne, je suis donc interprété");

Et l'une de mes questions était : avez-vous un élément dont l'id est "blink" dans votre page HTML ?

Merci pour votre aide,
J'ai collé directement ce code :

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
<html>
<head>
<script type="text/javascript"> 
function blink() 
{ 
       var toBl=document.getElementById('blink');
 
       if (toBl.style.color=='#191970'||toBl.style.color=='rgb(25, 25, 112)') 
       { 
            toBl.style.color='#DC143C';//rouge 
       } else { 
            toBl.style.color='#191970';//bleu 
       } 
} 
 
setInterval("blink()", 1000);
 
 
// PLF - http://www.jejavascript.net/
datedujour = new Date();
hdj=datedujour.getHours();
mdj=datedujour.getMinutes();
sdj=datedujour.getSeconds();
date_even = new Date(2011, 0, 09, hdj, mdj, sdj); //janv =0 > decemb =11
date1=datedujour.getTime();
date2=date_even.getTime();
nbrej= date2-date1;
nbrej= Math.round((Math.round(nbrej)/1000)/60/60/24);
document.write("Il reste "+nbrej+" jours avant le départ ");
</script>
</head>
 
<body>
<table align="center" width="1200" height="60" style="background: url('http://i51.tinypic.com/219qw7k.jpg');" border="0" cellspacing="0" cellpadding="0"><tr><td valign="bottom" style="padding: 5px;"><div style="text-align: center; padding: 10px; background:424242; border: 0px solid black;"><marquee direction="left" scrollamount="4" scrolldelay="8" onmouseover="this.stop();" onmouseout="this.start();"><b><font color="#ffffff"><font size=5><a         href="http://chiens-de-traineau.forumactif.com/les-courses-europeennes-f28/la-grande-odyssee-2011-t606.htm"><font color="white">VOUS POUVEZ ACCÉDER A LA PRÉSENTATION DE LA GRANDE ODYSSÉE 2011 EN CLIQUANT</font> <font color="red">   ICI</font> ....... </a></marquee></div></td></tr></table>
 
&nbsp;&nbsp;&nbsp;&nbsp;
 
</body>
</html>

Ça ne fonctionne pas,

Avant que je n'oublie, j'ai été un peu vite en disant que le Javascript était mieux placé dans le <head>. La déclaration de fonction, oui. L'affichage du nombre de jour restant, à la limite oui aussi car vous utiliser document.write(ce qui écrase tout ce qui existe).
Par contre, le démarrage du timer ne peut pas être lancé avant que le code HTML ne soit parsé. Pour ça, on va aller mettre le démarrage du timer dans le onload du <body>. Ca voudra dire que lorsque la page aura parsé tout le HTML, alors, et uniquement à ce moment-là, on lancera le timer. (voir code plus bas)

Ensuite, c'est bien ce qu'il me semblait; Il manque un id dans votre page.
Le timer exécute ceci :

Code:

document.getElementById('blink');

Cela veut dire qu'il interroge la page HTML et regarde si il y a un tag HTML avec comme id "blink". Or vous n'avez aucun élément avec cet id-là. Du coup, le timer change la couleur de... rien du tout. :P

Je ne sais pas exactement ce qui doit changer de couleur. A vous de nous le dire. Mais en guise d'exemple, j'ai rajouté un label dans votre code HTML :

Code:

<label id="blink">Je change de couleur</label>

C'est cette phrase qui va changer de couleur toute les secondes.
Je vous remets le code complet :
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 <html> <head> <script type="text/javascript"> function blink() { var toBl=document.getElementById('blink'); if (toBl.style.color=='#191970'||toBl.style.color=='rgb(25, 25, 112)') { toBl.style.color='#DC143C';//rouge } else { toBl.style.color='#191970';//bleu } } // PLF - http://www.jejavascript.net/ datedujour = new Date(); hdj=datedujour.getHours(); mdj=datedujour.getMinutes(); sdj=datedujour.getSeconds(); date_even = new Date(2011, 0, 09, hdj, mdj, sdj); //janv =0 > decemb =11 date1=datedujour.getTime(); date2=date_even.getTime(); nbrej= date2-date1; nbrej= Math.round((Math.round(nbrej)/1000)/60/60/24); document.write("Il reste "+nbrej+" jours avant le départ "); </script> </head> <body onload="setInterval('blink()', 1000);"> <label id="blink">Je change de couleur</label> <table align="center" width="1200" height="60" style="background: url('http://i51.tinypic.com/219qw7k.jpg');" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="bottom" style="padding: 5px;"> <div style="text-align: center; padding: 10px; background:424242; border: 0px solid black;"> <marquee direction="left" scrollamount="4" scrolldelay="8" onmouseover="this.stop();" onmouseout="this.start();"> <b><font color="#ffffff"><font size=5><a href="http://chiens-de-traineau.forumactif.com/les-courses-europeennes-f28/la-grande-odyssee-2011-t606.htm"><font color="white">VOUS POUVEZ ACCÉDER A LA PRÉSENTATION DE LA GRANDE ODYSSÉE 2011 EN CLIQUANT</font> <font color="red"> ICI</font> ....... </a> </marquee> </div> </td> </tr> </table>      </body> </html>

Oups

Ok ok, c'est la première ligne que vous voulez faire clignoter (c'est mis dans votre premier poste, pardon :oops:).

Alors j'ai remanié le code et voici ce que ça donne :

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
 
<html>
<head>
<script type="text/javascript"> 
function blink() 
{
       var toBl=document.getElementById('blink');
       
       if (toBl.style.color=='#191970'||toBl.style.color=='rgb(25, 25, 112)') 
       { 
            toBl.style.color='#DC143C';//rouge 
       } else { 
            toBl.style.color='#191970';//bleu 
       } 
} 
 
 
 
function init()
{ 
        // PLF - http://www.jejavascript.net/
        datedujour = new Date();
        hdj=datedujour.getHours();
        mdj=datedujour.getMinutes();
        sdj=datedujour.getSeconds();
        date_even = new Date(2011, 0, 09, hdj, mdj, sdj); //janv =0 > decemb =11
        date1=datedujour.getTime();
        date2=date_even.getTime();
        nbrej= date2-date1;
        nbrej= Math.round((Math.round(nbrej)/1000)/60/60/24);
        document.getElementById('blink').innerHTML = "Il reste "+nbrej+" jours avant le départ ";
        
        setInterval('blink()', 1000);
}
</script>
</head>
 
<body onload="init();">
<label id="blink">&nbsp;</label><br /><br />
<table align="center" width="1200" height="60" style="background: url('http://i51.tinypic.com/219qw7k.jpg');" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td valign="bottom" style="padding: 5px;">
			<div style="text-align: center; padding: 10px; background:424242; border: 0px solid black;">
				<marquee direction="left" scrollamount="4" scrolldelay="8" onmouseover="this.stop();" onmouseout="this.start();">
					<b><font color="#ffffff"><font size=5><a href="http://chiens-de-traineau.forumactif.com/les-courses-europeennes-f28/la-grande-odyssee-2011-t606.htm"><font color="white">VOUS POUVEZ ACCÉDER A LA PRÉSENTATION DE LA GRANDE ODYSSÉE 2011 EN CLIQUANT</font> <font color="red">   ICI</font> ....... </a>
				</marquee>
		  </div>
	  </td>
	</tr>
</table>
 
&nbsp;&nbsp;&nbsp;&nbsp;
 
</body>
</html>

En fait, comme évoqué précédemment, le document.write() écrase tout le document. Une raison pour laquelle on préfère ne pas l'utiliser. Trop dangereux.
J'ai donc mis le calcul du nombre de jour restant dans une fonction appelée "init()". C'est cette fonction qui sera appelée dans le onload du <body>. Pourquoi ? Parce que j'ai remplacé le document.write() par un document.getElementById("blink").innerHTML. Cette instruction veut dire que l'on va mettre du texte dans l'élément qui a pour id "blink". Quel texte ? La phrase qui doit changer de couleur.
En fin de fonction init(), j'appelle alors le timer qui ira changer la couleur de cette même phrase. :)

08/11/2010, 14h22
Alban 56

J'ai collé le code, la phrase apparait bien à l'écran, elle clignote, mais elle ne se trouve pas dans le bandeau défilant où elles était avant:cry:

Hé bien alors vous devez déplacer le :

Code:

<label id="blink"> </label>

à l'endroit que vous désirez. Je l'ai maintenant mis en début de texte défilant :

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
 
<html>
<head>
<script type="text/javascript"> 
function blink() 
{
       var toBl=document.getElementById('blink');
       
       if (toBl.style.color=='#191970'||toBl.style.color=='rgb(25, 25, 112)') 
       { 
            toBl.style.color='#DC143C';//rouge 
       } else { 
            toBl.style.color='#191970';//bleu 
       } 
} 
 
 
 
function init()
{ 
        // PLF - http://www.jejavascript.net/
        datedujour = new Date();
        hdj=datedujour.getHours();
        mdj=datedujour.getMinutes();
        sdj=datedujour.getSeconds();
        date_even = new Date(2011, 0, 09, hdj, mdj, sdj); //janv =0 > decemb =11
        date1=datedujour.getTime();
        date2=date_even.getTime();
        nbrej= date2-date1;
        nbrej= Math.round((Math.round(nbrej)/1000)/60/60/24);
        document.getElementById('blink').innerHTML = "Il reste "+nbrej+" jours avant le départ ";
        
        setInterval('blink()', 1000);
}
</script>
</head>
 
<body onload="init();">
<table align="center" width="1200" height="60" style="background: url('http://i51.tinypic.com/219qw7k.jpg');" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td valign="bottom" style="padding: 5px;">
			<div style="text-align: center; padding: 10px; background:424242; border: 0px solid black;">
				<marquee direction="left" scrollamount="4" scrolldelay="8" onmouseover="this.stop();" onmouseout="this.start();">
					<b><font color="#ffffff"><font size=5><label id="blink">&nbsp;</label>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://chiens-de-traineau.forumactif.com/les-courses-europeennes-f28/la-grande-odyssee-2011-t606.htm"><font color="white">VOUS POUVEZ ACCÉDER A LA PRÉSENTATION DE LA GRANDE ODYSSÉE 2011 EN CLIQUANT</font> <font color="red">   ICI</font> ....... </a>
				</marquee>
		  </div>
	  </td>
	</tr>
</table>
 
&nbsp;&nbsp;&nbsp;&nbsp;
 
</body>
</html>

08/11/2010, 15h53
Alban 56

Ça y est le décompte clignotant se trouve bien dans le bandeau défilant, mais je voudrait qu'il soit situé après les points qui sont derrière le ICI

Oui je sais je suis ch**nt mais à mon âge je risque plus de changer :oops:
08/11/2010, 16h18
Bovino

Citation:

Envoyé par Alban 56

Ça y est le décompte clignotant se trouve bien dans le bandeau défilant, mais je voudrait qu'il soit situé après les points qui sont derrière le ICI

Ben place la balise au bon endroit ! :roll:
08/11/2010, 16h58
Alban 56

Merci "Vermine" ça fonctionne 5/5, sans toi je ne m'en serait jamais sorti. :ccool: