Compte à rebours en boucle

Version imprimable

Bonjour à tous,

J'ai intégré un compteur en javascript grace à un fichier .js inséré à la base de l'arborescence de mon site.

Mon problème est que quand le compteur atteint la valeur 0, il repart dans le positif.

Celui-ci est basé sur une date insérée dans le code de la page grâce à ces quelques lignes de code :
Code:

1 2 3 4 5 6 7 <span style="color: rgb(255, 0, 0);">Counting down to the end of the special offer : </span><span style="color: rgb(255, 0, 0);" id="countdown1">2006-7-15 22:00:00 GMT+02:00 </span></big><span style="color: rgb(255, 0, 0);"><big style="font-weight: bold;">!</big><br> <br>
Quelqu'un saurait-il modifier ces lignes de code de façon à ce que la date (en l'occurrence 15/07/2006 ici) se convertisse automatiquement en J+1, à savoir la date actuelle + un jour.

Ainsi, le compteur repartirait automatiquement à 24h chaque fois qu'il atteint 0 (ou plutôt chaque fois qu'on passerait l'heure prédéfinie à côté de la date), et cela m'éviterait de devoir modifier chaque jour la date (15/07/2006) sur chacune des pages de mon site.

Merci beaucoup pour votre aide. Je suis aussi preneur si quelqu'un a un autre script (dynamique) qui revient automatiquement à la valeur définie une fois arrivé à 0 (en l'occurrence 24h dans mon cas).

Un grand merci à ceux qui tenteront de m'aider. :roll:

Thomas

20/09/2006, 07h03
Sheriff

Salut !
peut-on voir le code JS que tu utilises ?
je me dit qu'en utilisant l'objet Date ce ne serait qu'une formalité (voir la FAQ).
@+

Merci Shériff pour ta réponse.

Si je n'avais pas donné mon script, c'est parce-que j'espérais pouvoir agir simplement sur le code html afin que la date change d'elle meme toutes les 24h sans avoir à modifier le script en lui-même.

J'ai trouvé des infos sur "l'objet date" que tu m'as conseillé, mais malheureusement étant un grand débutant en javascript, je ne crois pas être capable d'utiliser ces données.

Je te joins donc mon compte à rebours, en espérant que toi ou quelqu'un d'autre pourra faire mon bonheur !

Merci encore !

Code:

1
2
// Andrew Urquhart : CountDown Timer : http://andrewu.co.uk/clj/countdown/
function CD_T(id,e){var n=new Date();CD_D(+n,id,e);setTimeout("CD_T('"+id+"',"+e+")",1100-n.getMilliseconds())};function CD_D(n,id,e){var ms=e-n;if(ms<=0) ms*=-1;var d=Math.floor(ms/864E5);ms-=d*864E5;var h=Math.floor(ms/36E5);ms-=h*36E5;var m=Math.floor(ms/6E4);ms-=m*6E4;var s=Math.floor(ms/1E3);CD_OBJS[id].innerHTML=d+" day"+(d==1?" ":"s ")+CD_ZP(h)+"h "+CD_ZP(m)+"m "+CD_ZP(s)+"s"};function CD_ZP(i){return(i<10?"0"+i:i)};function CD_Init(){var pref="countdown";var objH=1;if(document.getElementById||document.all){for(var i=1;objH;++i){var id=pref+i;objH=document.getElementById?document.getElementById(id):document.all[id];if(objH&&(typeof objH.innerHTML)!='undefined'){var s=objH.innerHTML;var dt=CD_Parse(s);if(!isNaN(dt)){CD_OBJS[id]=objH;CD_T(id,dt.valueOf());if(objH.style){objH.style.visibility="visible"}}else {objH.innerHTML=s+"<a href=\"http://andrewu.co.uk/clj/countdown/\" title=\"Countdown Error:Invalid date format used,check documentation (see link)\">*</a>"}}}}};function CD_Parse(strDate){var objReDte=/(\d{4})\-(\d{1,2})\-(\d{1,2})\s+(\d{1,2}):(\d{1,2}):(\d{0,2})\s+GMT([+\-])(\d{1,2}):?(\d{1,2})?/;if(strDate.match(objReDte)){var d=new Date(0);d.setUTCFullYear(+RegExp.$1,+RegExp.$2-1,+RegExp.$3);d.setUTCHours(+RegExp.$4,+RegExp.$5,+RegExp.$6);var tzs=(RegExp.$7=="-"?-1:1);var tzh=+RegExp.$8;var tzm=+RegExp.$9;if(tzh){d.setUTCHours(d.getUTCHours()-tzh*tzs)}if(tzm){d.setUTCMinutes(d.getUTCMinutes()-tzm*tzs)};return d}else {return NaN}};var CD_OBJS=new Object();if(window.attachEvent){window.attachEvent('onload',CD_Init)}else if(window.addEventListener){window.addEventListener("load",CD_Init,false)}else {window.onload=CD_Init}

Salut !
yeute un peu ce code : il pourrait t'aider ;
je crois qu'il est plus facile à manipuler...
@+

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
<html>
<head>
<title>exemple4
</title>
<script language="Javascript">
var sem=new Array(7);
var a=0,b=0;
sem[1]="Lundi";
sem[2]="Mardi";
sem[3]="Mercredi";
sem[4]="Jeudi";
sem[5]="Vendredi";
sem[6]="Samedi";
sem[0]="Dimanche";
var _12mois=new Array(12);
_12mois[0]="Janvier";
_12mois[1]="Février";
_12mois[2]="Mars";
_12mois[3]="Avril";
_12mois[4]="Mai";
_12mois[5]="Juin";
_12mois[6]="Juillet";
_12mois[7]="Août";
_12mois[8]="Septembre";
_12mois[9]="Octobre";
_12mois[10]="Novembre";
_12mois[11]="Décembre";
var date=new Date(); //déclaration d'une variable de type date qui contient la date courante
var mois=date.getMonth(); //la variable mois contient le N° du mois de 0 à 11
var jour=date.getDate();
var annee=date.getFullYear();
var jour_sem=date.getDay();
document.write((sem[jour_sem]+", le "+jour+" "+_12mois[mois]+" "+annee+"<br>").bold().fontcolor("blue").fontsize("3").italics().link("#"));
 
function aff()	{
var horl = new Date();
var heure=horl.getHours(); min=horl.getMinutes(); sec=horl.getSeconds();
document.form1.texte.value=heure+":"+(min<10?"0":"")+min+":"+(sec<10?"0":"")+sec;
document.getElementById("he").innerHTML=heure+":"+(min<10?"0":"")+min+":"+(sec<10?"0":"")+sec;
//val();
document.getElementById("he").style.left = document.body.scrollLeft + a;
document.getElementById("he").style.top = document.body.scrollTop + b;
setTimeout('aff()',10);
}
</script>
</head>
<body onload="aff()" bgcolor="#c0c0c0">
<form name="form1">
<input name="texte" type="text" value="Afficher l'heure" onclick="if (document.form1.texte.value='Afficher l\'heure') aff()" style="font-family:tahoma,verdana; color:red; font-size:8pt; cursor:hand" readonly>
</form>
<div id="he" style="font-family:tahoma,verdana; color:white; font-size:8pt; cursor:arrows; position:absolute; font-weight:bold"></div><br>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>fin
</body>
 
</html>

22/09/2006, 02h26
foufoutom

Merci beaucoup, je viens de tester ton script, mais il s'agit d'un script qui donne l'heure en dynamique. Ce n'est pas un compte à rebours.

Thomas
22/09/2006, 06h33
Sheriff

salut !
justement, pour le transformer en compte à rebours suffit de remplacer la ligne

Code:

document.getElementById("he").innerHTML=heure+":"+(min<10?"0":"")+min+":"+(sec<10?"0":"")+sec;

par

Code:

document.getElementById("he").innerHTML="- "+(24-heure)+":"+(min>50?"0":"")+(60-min)+":"+(sec>=50?"0":"")+(59-sec);

puisque ce n'est que l'heure qui t'intéresse je pense que ça devrait aller...
En2k, peut-être n'ai-je pas très bien saisi le problème : peux-tu reformuler stp ?
@+
23/09/2006, 04h12
foufoutom

Merci beaucoup Shérif ! J'ai remplacé la ligne de code comme tu me l'as suggéré et le compte à rebours fonctionne.

J'ai un peu modifié le code à ma sauce, mais j'ai encore quelques petits problèmes :

Je ne parviens pas à centrer la ligne ou apparait la date.
De plus, je parviens à placer du texte sous le compteur, mais pas au-dessus, comment faire pour intercaler l'ensemble du compteur (ligne avec la date y compris) dans mes pages html ? En effet dans le code source, je vois "body onload" mais pas la balise <body> habituelle. Et si j'essaie de l'ajouter avant "body onload", le compteur ne fonctionne plus. Je ne parviens donc pas à placer du texte au-dessus du compteur sans qu'il n'y ait d'incidence sur ce dernier.
Est-il possible d'intercaler ce compteur en plein milieu d'une page ?

D'autre part, la ligne avec la date semble ne vouloir apparaître qu'en haut de page.

Merci infiniement pour ton aide !

Thomas

P.S. : Bonjour au Cameroun ! ;)

salut !
tout est résolu, maintenant : et en plus le code a été commenté pour que tu le manipules à ta guise. cependant il voici quelques explications :
la balise <body>, comme la plupart des balises html peuvent avoir des propriétés ; il existe donc la propriété onload qui définit les instructions qui seront exécutées au chargement de la page.
pour centrer l'heure, si tu utilises un <div> tu n'as qu'à lui attribuer la propriété align=center; si tu utilises les tableaux tu peux faire un <td align=center>
tu trouveras d'autres explications dans le code.
heu... pour obtenir le compte à rebours il faudra remodifier la ligne que tu connais-là.
@+ et n'oublie pas le tag :resolu:

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<html>
<head>
<title>exemple4
</title>
<script language="Javascript">
 
function AfficherDate(){
var sem=new Array(7);
var a=0,b=0;
sem[1]="Lundi";
sem[2]="Mardi";
sem[3]="Mercredi";
sem[4]="Jeudi";
sem[5]="Vendredi";
sem[6]="Samedi";
sem[0]="Dimanche";
var _12mois=new Array(12);
_12mois[0]="Janvier";
_12mois[1]="Février";
_12mois[2]="Mars";
_12mois[3]="Avril";
_12mois[4]="Mai";
_12mois[5]="Juin";
_12mois[6]="Juillet";
_12mois[7]="Août";
_12mois[8]="Septembre";
_12mois[9]="Octobre";
_12mois[10]="Novembre";
_12mois[11]="Décembre";
var date=new Date(); //déclaration d'une variable de type date qui contient la date courante
var mois=date.getMonth(); //la variable mois contient le N° du mois de 0 à 11
var jour=date.getDate(); //la variable jour contient le jour du mois (du 1er au 31)
var annee=date.getFullYear();//l'année
var jour_sem=date.getDay();//le jour de la semaine, numéroté de 0 (pour dimanche) à 6 (pour lundi)
 
/*Cette ligne affiche la date dans le bloc qui a pour id "dat", span qu'on peut placer n'importe où dans la page*/
document.getElementById("dat").innerHTML=sem[jour_sem]+", le "+jour+" "+_12mois[mois]+" "+annee;
}
 
function AfficherHeure()	{
//Récupération de la date et de 
	var horl = new Date();
	var heure=horl.getHours(); min=horl.getMinutes(); sec=horl.getSeconds();
 
/*Affichage de l'heure : la première ligne permet d'écrire la date dans input (qui a pour nom name="texte") de formulaire (qui a pour nom name="form1");
la seconde permet de le faire dans le bloc qui a pour id "he" */
	document.form1.texte.value=heure+":"+(min<10?"0":"")+min+":"+(sec<10?"0":"")+sec;
	document.getElementById("he").innerHTML=heure+":"+(min<10?"0":"")+min+":"+(sec<10?"0":"")+sec;
 
//à minuit on change naturellement de date, donc on réaffiche la date
	if (heure==0&&min==0&&sec==0)
		AfficherDate();
 
//On repète l'affichage de l'heure toute les secondes (1000 millièmes de secondes)	
	setTimeout('AfficherHeure()',1000);
}
</script>
 
</head>
<body onload="AfficherDate(); AfficherHeure()" bgcolor="#c0c0c0">
<form name="form1">
<input name="texte" type="text" value="" style="font-family:tahoma,verdana; color:red; font-size:8pt; cursor:hand" readonly>
</form>
<span id="dat" style="font-family:tahoma,verdana; color:blue; font-size:10pt; font-weight:bold; font-style:italic"></span><br>
<div align=center id="he" style="font-family:tahoma,verdana; color:white; font-size:8pt;font-weight:bold"></div><br>
</body>
 
<!-- A présent tu peux placer l'heure et la date où tu veux dans ta page juste en mettant leurs span aux endroit qui te conviennent 
	Astuce : si tu ne veux pas utiliser le innerHTML tu peux utiliser le input et mettre style="background:none; border:none"
-->
 
</html>

P.S. Merci pour le P.S. ;)

24/09/2006, 16h11
foufoutom

Merci beaucoup Sheriff encore une fois pour tes réponses détaillées et ta précieuse aide.

Cependant, je viens de tester le nouveau code que tu m'as préparé et il doit comporter une erreur, car il y a une erreur sur la page et l'heure n'apparaît pas, ni dans la case ni sous forme de texte, seule la date apparait.

Je ne peux donc pas le modifier selon tes conseils puisque je ne sais pas d'ou vient l'erreur.

Merci,

Thomas
24/09/2006, 17h22
foufoutom

J'avais créé la page à partir de Nvu, et j'ai testé avec Dreamweaver au cas ou et le code fonctionne !!! Cela devait etre un bug de Nvu.

Je vais jeter un oeil à ton compte à rebours et le tester !

Un grand merci à toi quoi qu'il en soit pour ta précieuse aide !

Je te donne mes impressions d'ici peu !

Thomas
24/09/2006, 20h42
foufoutom

Désolé je vais encore t'embêter, mais j'ai un dernier petit souci...

J'ai pu faire fonctionner ton compteur à merveille et je t'en remercie.

Voici la page ou tu peux voir à quoi il ressemble après modifications :

http://www.letsgetyourmoneyback.com/sheriftest22.html

Malheureusement, une fois que j'essaie de l'intégrer à l'une de mes pages, voici ce qui se passe :

http://www.letsgetyourmoneyback.com/...us1script.html

Je ne comprends pas, j'ai utilisé exactement le même code que sur la page de test que je t'ai donnée ci-dessus, j'ai même essayé de coller tout le code de ma page web au-dessus et au-dessous du compteur directement sur la page ou il fonctionnait, et systématiquement la page affiche une erreur.

Cela ne vient apparemment pas de la fonction onload, puisque la date, elle, s'affiche. Seul le compte à rebours ne s'affiche pas.

Comme tu peux le constater, j'ai caché la fenêtre affichant l'heure, mais je ne l'ai pas supprimée. Le problème ne vient donc pas de là, d'autant plus que le code est strictement identique dans les deux pages.

Je me demande si cela ne pourrait pas venir d'une "interférence" avec un autre élément javascript de la page.

Je sais que je t'ai déjà pas mal embêté, mais est-ce que tu pourrais essayer de jeter un oeil au code de ma page pour voir si tu comprends pourquoi le compteur ne s'affiche pas sur celle-ci alors qu'il s'affiche sur une page vierge ?

Merci pour tout ce que tu as fait jusqu'à présent en tout cas. Merci d'avance également à toute personne qui serait en mesure de comprendre d'ou vient le problème d'affichage de mon compteur.

Thomas

re salut !
tu te souviens de ces deux lignes ?
Code:

1 2 document.form1.texte.value=heure+":"+(min<10?"0":"")+min+":"+(sec<10?"0":"")+sec; document.getElementById("he").innerHTML="Counting down to the end of the special offer : - 0 day(s), "+(23-heure)+" hour(s), "+(min>50?"0":"")+(59-min)+" minute(s), "+(sec>=50?"0":"")+(59-sec)+" second(s)";
eh bien juste au dessus il y a un commentaire qui précise bien que la première permet d'écrire la date dans un input qui a pour nom "texte"...
puisque tu n'a de <input name=texte> nulle part dans ta page c'est normal que celle-ci te retourne une erreur (petit triangle jaune au coin gauche en bas de la fenêtre - si tu doubleclique dessus et tu affiches les détails, tu pourras lire un message du type : document.form1.texte a la valeur nulle ou n'est pas un objet) ; tu ferais mieux de supprimer la première ligne, à savoir

Code:

document.form1.texte.value=heure+":"+(min<10?"0":"")+min+":"+(sec<10?"0":"")+sec;

: de toutes façons elle ne sert juste qu'à afficher l'heure une seconde fois...
@+

25/09/2006, 02h41
foufoutom

Re-salut Sheriff !

Je viens de trouver ta réponse, je me suis empressé de supprimer la ligne en question, et à mon grand soulagement... ça marche ! Mon compteur est enfin opérationnel !

J'ai passé des heures et des heures à retourner mon ancien script dans tous les sens, à chercher sur internet, sur les forums un moyen de faire en sorte que mon compteur revienne de lui meme à 24h chaque fois qu'il atteint zéro... en vain !

Je ne pouvais pas lancer la promotion de mon site tant que je n'avais pas résolu ce problème, puisque j'étais obligé de modifier la date chaque jour sur chaque page de mon site tant que ca ne se faisait pas automatiquement !

Et pour ce qui est de la ligne en question, si je n'ai pas prêté attention à ton commentaire, ce n'est pas parce-que je me fichais de tes explications, bien au contraire, c'est juste que je suis un grand débutant en programmation, je ne connais que les bases des bases, et je ne sais même pas ce qu'est un "input" !

Tu m'as même appris que je pouvais double cliquer sur le point d'exclamation pour avoir le détail de l'erreur ! Je pensais toujours que si ce genre de chose arrivait et que je ne m'en rendais pas compte immédiatement, ce serait la croix et la bannière pour parvenir à retrouver l'erreur et la corriger ! :mouarf:

Alors a mon grand soulagement (et aussi a TON grand soulagement :roll: ) j'ai le plaisir d'ajouter le tag résolu à ce post !!!

Quoi qu'il en soit tu m'as vraiment sauvé la vie et je te remercie infiniement d'avoir passé du temps à m'aider à résoudre mon problème.

Je vois pas vraiment comment je peux te remercier mais s'il y a quoi que ce soit que je puisse faire pour toi fais moi signe si c'est dans mes cordes ce sera avec plaisir !

Je te donne mon adresse au cas ou : xxxxxxxxx@hotmail.com, tu pourras me contacter sur msn avec cette adresse si nécessaire.

Merci encore et bonne continuation avec la programmation... et surtout bravo pour tes conseils, tes explications et tes compétences !

A plus Thomas ;)
25/09/2006, 06h52
Sheriff

Salut !
j'ai noté l'adresse, mais je te demande de modifier ton message et de la supprimer - ladite adresse ; c'est vivement déconseillé de l'écrire dans les messages : tout le monde pourra la voir et ne sois pas surpris d'avoir plein de messages indésirables dans ton mail box, ainsi que plein d'autres trucs zarbi...
tu aurais pu modifier ton profil et y mettre ton adresse email ; ça aurait affiché des icônes comme celles que tu peux voir dans ma zone de description ci-contre (celle où apparaissent mon pseudo, ma localisation, le nombre de mes messages, etc.) : tu remarqueras deux icones - MSN et Yahoo - qui pointent vers une page pour m'écrire.
Allez beaucoup de courage pour la suite et à très bientôt sur... MSN !
@+