Compte à rebours [Résolu]

[liloune89]

Bonjour,

voilà je suis sur un compte à rebours, à la base j'ai suivi le tuto suivant :
http://dewep.net/Tutoriel-5/Compte-a-rebours-JavaScript

Il fonctionne parfaitement sous Firefox, mais cet IE de malheur refuse de faire fonctionner le script.
Je vous place ci-dessous mon 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
function compte_a_rebour(){
    var CompteARebours = document.getElementById("CompteARebours");
    var date_actuelle = new Date();
    var date_evenement = new Date("<?php echo $evenement;?>");
    var temps = (date_evenement - date_actuelle) / 1000;
var Table_debut = "<table height=\"22px\" cellpadding=\"0\" cellspacing=\"0\" class=\"bloc-deal-1-2-temps\"><tr>";<!-- case début du tableau -->
    var Td_H_Av = "<td width=\"22px\">"; <!-- case de l heure -->
    var Td_H_Ap = "</td><td width=\"14px\"><span>"; <!-- case du symbole heure -->
    var Td_M_Av = "</span></td><td width=\"22px\">"; <!-- case des minutes -->
    var Td_M_Ap = "</td><td width=\"19px\"><span>"; <!-- case du symbole minute -->
    var Td_S_Av = "</span></td><td width=\"24px\">"; <!-- case des secondes -->
    var Td_S_Ap = "</td><td width=\"16px\"><span>"; <!-- case du symbole seconde -->
    var Table_fin = "</span></td></tr></table>"; <!-- case fin du tableau -->
 
 
    if (temps > 0){
        DiffJour = Math.floor (temps / 86400);
        DiffHeure = Math.floor ((temps - (DiffJour * 86400)) / 3600);
        DiffMin = Math.floor ((temps - ((DiffJour * 86400 + DiffHeure * 3600))) / 60);
        DiffSec = Math.floor (temps - ((DiffJour * 86400 + DiffHeure * 3600 + DiffMin * 60)));
		if (DiffHeure < 10) { DiffHeure = "0"+DiffHeure ; }
		if (DiffMin < 10) { DiffMin = "0"+DiffMin ; }
		if (DiffSec < 10) { DiffSec = "0"+DiffSec ; }
		if (DiffJour != 0) { DiffHeure = parseInt(DiffJour*24)+parseInt(DiffHeure) ; }
 
        CompteARebours.innerHTML = Table_debut + ' ' + Td_H_Av + ' ' + DiffHeure + ' ' + Td_H_Ap + ' ' + 'h' + ' ' + Td_M_Av + ' ' + DiffMin + ' ' + Td_M_Ap + ' ' + 'm' + ' ' + Td_S_Av + ' ' + DiffSec + ' ' + Td_S_Ap + ' ' + 's' + ' ' + Table_fin;
    } 
	else
	{
	CompteARebours.innerHTML = Table_debut + ' ' + Td_H_Av + ' ' + '00' + ' ' + Td_H_Ap + ' ' + 'h' + ' ' + Td_M_Av + ' ' + '00' + ' ' + Td_M_Ap + ' ' + 'm' + ' ' + Td_S_Av + ' ' + '00' + ' ' + Td_S_Ap + ' ' + 's' + ' ' + Table_fin;
    }
    Time_ReLance = setTimeout("compte_a_rebour();", 1000);
}

Si quelqu'un a une idée, je suis preneuse lol

[Watilin]

Bonsoir,
des commentaires HTML dans du code JavaScript, ça passe moyen en général. D'ailleurs je ne comprends pas pourquoi ça marche sous FF.

Sinon, sous IE, tu peux nous trouver un message d'erreur histoire de cerner le problème ? Si tu as IE7 ou plus, normalement tu fais F12 et ça ouvre la console.

[Auteur]

bonjour,

ton script fonctionne sous IE9...

[liloune89]

Merci pour vos réponses, en fait je peux pas faire autrement pour le html, je dois intégrer le code décomposé, du coup j'ai trouvé que ça pour afficher le résultat.

Par rapport à IE pour le F12 que dois-je trouver exactement pour vous donner une piste ?

[Watilin]

Il y a un onglet « console ». Ouvre-le, recharge ta page, et les éventuels messages d'erreur devraient s'afficher dedans

[liloune89]

je suis allé sur script-> puis console
à gauche j'ai le code de ma page et à droite c vide

du coup j'ai lancé un débogage
et à gauche une ligne est en jaune :
var CompteARebours = document.getElementById("CompteARebours");

à droite je sélectionne "variables locales" et là un tableau indique que la valeur est "undefined" non défini.

[Sharcoux]

On peut avoir le code HTML lié à l'ID "CompteARebours"?

[liloune89]

comment je le récupère ?

Voici tout le code qui concerne l'affichage du compte à rebours.

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
 
<div class="bloc-deal-1-2-temps">
<script type="text/javascript">
	function compte_a_rebour(){
    var CompteARebours = document.getElementById("CompteARebours");
    var date_actuelle = new Date();
    var date_evenement = new Date("<?php echo $evenement;?>");
    var temps = (date_evenement - date_actuelle) / 1000;
	var Table_debut = "<table height=\"22px\" cellpadding=\"0\" cellspacing=\"0\" class=\"bloc-deal-1-2-temps\"><tr>";<!-- case début du tableau -->
    var Td_H_Av = "<td width=\"22px\">"; <!-- case de l'heure -->
    var Td_H_Ap = "</td><td width=\"14px\"><span>"; <!-- case du symbole heure -->
    var Td_M_Av = "</span></td><td width=\"22px\">"; <!-- case des minutes -->
    var Td_M_Ap = "</td><td width=\"19px\"><span>"; <!-- case du symbole minute -->
    var Td_S_Av = "</span></td><td width=\"24px\">"; <!-- case des secondes -->
    var Td_S_Ap = "</td><td width=\"16px\"><span>"; <!-- case du symbole seconde -->
    var Table_fin = "</span></td></tr></table>"; <!-- case fin du tableau -->
 
 
    if (temps > 0){
        DiffJour = Math.floor (temps / 86400);
        DiffHeure = Math.floor ((temps - (DiffJour * 86400)) / 3600);
        DiffMin = Math.floor ((temps - ((DiffJour * 86400 + DiffHeure * 3600))) / 60);
        DiffSec = Math.floor (temps - ((DiffJour * 86400 + DiffHeure * 3600 + DiffMin * 60)));
		if (DiffHeure < 10) { DiffHeure = "0"+DiffHeure ; }
		if (DiffMin < 10) { DiffMin = "0"+DiffMin ; }
		if (DiffSec < 10) { DiffSec = "0"+DiffSec ; }
		if (DiffJour != 0) { DiffHeure = parseInt(DiffJour*24)+parseInt(DiffHeure) ; }
 
        CompteARebours.innerHTML = Table_debut + ' ' + Td_H_Av + ' ' + DiffHeure + ' ' + Td_H_Ap + ' ' + 'h' + ' ' + Td_M_Av + ' ' + DiffMin + ' ' + Td_M_Ap + ' ' + 'm' + ' ' + Td_S_Av + ' ' + DiffSec + ' ' + Td_S_Ap + ' ' + 's' + ' ' + Table_fin;
    } 
	else
	{
	CompteARebours.innerHTML = Table_debut + ' ' + Td_H_Av + ' ' + '00' + ' ' + Td_H_Ap + ' ' + 'h' + ' ' + Td_M_Av + ' ' + '00' + ' ' + Td_M_Ap + ' ' + 'm' + ' ' + Td_S_Av + ' ' + '00' + ' ' + Td_S_Ap + ' ' + 's' + ' ' + Table_fin;
    }
    Time_ReLance = setTimeout("compte_a_rebour();", 1000);
}
</script>
<div id="CompteARebours"><noscript>Merci d'activer votre JavaScript.</noscript></div>
</div>

[Watilin]

Damn, Hell, je comprends vraiment pas pourquoi ça marche sous Firefox

+1 pour la réponse de Sharcoux (j'allais le dire) ^^

[liloune89]

ça marche aussi sous Chrome

Voilà ce que ça affiche sous FF et Chrome, sous IE y'a des 00 à la place des chiffres

[Eric2a]

Salut,

Il y a peut-être une incompatibilité au niveau du format de date dans la variable PHP $evenement ?

[liloune89]

Pour $evenement, le calcul se fait ainsi :

Récupération des données de la base.
les dates sont Y-m-d et les heures 00:00:00
$deal_fin_date = 2011-07-03
$deal_fin_time = 23:59:59

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
$date_explosee = explode("-", $deal_fin_date);
$an_old=$date_explosee[0];
$mois_old=$date_explosee[1];
$jour_old=$date_explosee[2];
 
$time_explosee = explode(":", $deal_fin_time);
$heure_old=$time_explosee[0];
$minute_old=$time_explosee[1];
$seconde_old=$time_explosee[2];
 
$evenement = "$mois_old $jour_old $heure_old:$minute_old:$seconde_old $an_old";

[Bovino]

Envoyé par Eric2a

Salut,

Il y a peut-être une incompatibilité au niveau du format de date dans la variable PHP $evenement ?

+1.
Il me semble que l'argument passé au constructeur Date() est plus restrictif pour IE que pour FF.

[liloune89]

Alors comment régler ça ?
Y'a pas un code en plus pour IE à placer ?

[Bovino]

Non, il suffit de passer à Date() un paramètre accepté par tous les navigateurs
Mais comme tu n'as pas lu Important : Les règles incontournables d'utilisation de ce forum et que tu nous a mis du code PHP au lieu du code HTML généré, on ne sait pas (comme déjà précisé) à quoi correspond $evenement et donc, on ne peut pas t'aider beaucoup plus

[Sharcoux]

si ça marche pas, essaye juste un truc (c'est peut-être une connerie, mais bon) :

mets ton bloc script dans <head>, puis à la fin de head : document.onload = compte_a_rebour;

En effet, j'ai tendance à penser que le div n'est pas encore en place quand getElementByID est executé

[liloune89]

Veuillez m'excuser, j'ai plus l'habitude d'utiliser du html pur et ne travaille qu'avec du php.
Donc pour vous dire exactement $evenement correspond à :

en php
$evenement = "$mois_old $jour_old $heure_old:$minute_old:$seconde_old $an_old";

et en clair la date et l'heure de référence étaient :
$deal_fin_date = 2011-07-03
$deal_fin_time = 23:59:59
Donc "07 03 23:59:59 2011"
le mois, le jours, l'heure et l'année

[liloune89]

Envoyé par Sharcoux

si ça marche pas, essaye juste un truc (c'est peut-être une connerie, mais bon) :

mets ton bloc script dans <head>, puis à la fin de head : document.onload = compte_a_rebour;

En effet, j'ai tendance à penser que le div n'est pas encore en place quand getElementByID est executé

Sharcoux, bonne idée mais si je fais ça je perds la date et l'heure de mon événement vu que je la récupère avec une balise PHP. Si c'était une date fixe, ça serait possible.

J'ai remplacé le code php
var date_evenement = new Date("<?php echo $evenement;?>");
par
var date_evenement = new Date("07 03 23:59:59 2011");

le résultat est le même autant à sa place dans le body que dans le head.
Pour moi je ne pense pas que ce soit ça qui bloque, il doit y avoir autre chose qui bloque pour IE, n'étant une pro du javascript, je suis perdue.

merci d'avance de votre aide

[Bovino]

La méthode la plus sure pour créer un objet Date() reste encore

Code :

new Date(année, mois, jour, heure, minute, seconde, milliseconde);

[Eric2a]

Essaie ceci

Code php :

1
2
3
<?php
$evenement=$an_old.','.($mois_old-1).','.$jour_old.','.$heure_old.','.$minute_old.','.$seconde_old.',0,0';
?>

Pour obtenir une chaine permettant d'utiliser la méthode présentée par Bovino.