Faire clignoter un compte à rebours

**Alban 56** · 07/11/2010, 07h31

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 :

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

**vermine** · 08/11/2010, 07h48

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 :

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

//rouge

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

Petite remarque, je vois ceci :

Code :

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

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

**vermine** · 08/11/2010, 10h00

Suite à votre message privé, voici quelques explications.

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

Code html :

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

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

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

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

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 ?

**Alban 56** · 08/11/2010, 12h41

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

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

**vermine** · 08/11/2010, 12h53

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 :

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

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.

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 :

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

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

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
 
<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>
 
&nbsp;&nbsp;&nbsp;&nbsp;
 
</body>
</html>

**vermine** · 08/11/2010, 13h06

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

).

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

Code html :

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

Faire clignoter un compte à rebours

JavaScript

Vue hybride

Discussions similaires

Partager

Partager