Compte à rebours

**L'aigle de Carthage** · 07/03/2014, 23h07

Bonsoir,

J'essai d'insérer un compte à rebours dans ma page web comme suit:

Code html :

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

1
2
3
4
5
6
7
8
9
<body>
	<div id="countdown">
	    <strong>Remaining time</strong> :
	    <span id="countdown_day" >05</span> jours
	    <span id="countdown_hour">11</span> heures
	    <span id="countdown_min" >50</span> minutes
	    <span id="countdown_sec" >22</span> secondes
	</div>
</body>

et voici le javascript que j'ai inséré dans la même page:

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
countdownManager = {
    // Configuration
    targetTime: new Date('2012-11-05 00:00:00'), // Date cible du compte à rebours (00:00:00)
    displayElement: { // Elements HTML où sont affichés les informations
        day:  null,
        hour: null,
        min:  null,
        sec:  null
    },
    // Initialisation du compte à rebours (à appeler 1 fois au chargement de la page)
    init: function(){
        // Récupération des références vers les éléments pour l'affichage
        // La référence n'est récupérée qu'une seule fois à l'initialisation pour optimiser les performances
        this.displayElement.day  = jQuery('#countdown_day');
        this.displayElement.hour = jQuery('#countdown_hour');
        this.displayElement.min  = jQuery('#countdown_min');
        this.displayElement.sec  = jQuery('#countdown_sec');
        // Lancement du compte à rebours
        this.tick(); // Premier tick tout de suite
        window.setInterval("countdownManager.tick();", 1000); // Ticks suivant, répété toutes les secondes (1000 ms)
    },
    // Met à jour le compte à rebours (tic d'horloge)
    tick: function(){
        // Instant présent
        var timeNow  = new Date();
        // On s'assure que le temps restant ne soit jamais négatif (ce qui est le cas dans le futur de targetTime)
        if( timeNow > this.targetTime ){
            timeNow = this.targetTime;
        }
        // Calcul du temps restant
        var diff = this.dateDiff(timeNow, this.targetTime);
        this.displayElement.day.text(  diff.day  );
        this.displayElement.hour.text( diff.hour );
        this.displayElement.min.text(  diff.min  );
        this.displayElement.sec.text(  diff.sec  );
    },
    // Calcul la différence entre 2 dates, en jour/heure/minute/seconde
    dateDiff: function(date1, date2){
        var diff = {}                           // Initialisation du retour
        var tmp = date2 - date1;
        tmp = Math.floor(tmp/1000);             // Nombre de secondes entre les 2 dates
        diff.sec = tmp % 60;                    // Extraction du nombre de secondes
        tmp = Math.floor((tmp-diff.sec)/60);    // Nombre de minutes (partie entière)
        diff.min = tmp % 60;                    // Extraction du nombre de minutes
        tmp = Math.floor((tmp-diff.min)/60);    // Nombre d'heures (entières)
        diff.hour = tmp % 24;                   // Extraction du nombre d'heures
        tmp = Math.floor((tmp-diff.hour)/24);   // Nombre de jours restants
        diff.day = tmp;
        return diff;
    }
};
jQuery(function($){
    // Lancement du compte à rebours au chargement de la page
    countdownManager.init();
});

Le problème c'est que la date reste inerte dans la page (05 jours 11 heures 50 minutes 22 secondes), je n'ai pas compris c'est quoi l'erreur?

Pourquoi le compte à rebours ne se met pas à decrémenter?

Remarque: J'ai déja fait appel au fichier jquery-1.10.1.js

Merci d'avance

**Spartacusply** · 07/03/2014, 23h48

Mmmmh... m'étonnerait fortement que le setInterval avec des guillemets double fonctionne.

Essaye plutôt :

Code :

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

1
2
 
setTimeout(function(){countdownManager.tick();},1000);

**L'aigle de Carthage** · 08/03/2014, 09h31

Bonjour,

Merci pour la réponse mais en se référant à ce que l'on trouve, on peut mettre le setInterval avec des guillemets double!

Ca ne marche toujours pas.

Cordialement.

**Spartacusply** · 08/03/2014, 09h57

Euh... en fait ton script marche très bien, c'est juste que tu as mis la date cible en 2012, donc il peut pas décrémenter vu que la date est déjà passée... J'ai testé, ça marche très bien avec une date dans le futur

**L'aigle de Carthage** · 09/03/2014, 18h26

Ca ne marche toujours pas chez moi malgré que j'ai changé la date cible!

Pouvez vous m'envoyer le code dont vous avez testé?

Merci

**Spartacusply** · 09/03/2014, 18h40

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    countdownManager = {
        // Configuration
        targetTime: new Date('2015-1-05 00:00:00'), // Date cible du compte à rebours (00:00:00)
        displayElement: {// Elements HTML où sont affichés les informations
            day: null,
            hour: null,
            min: null,
            sec: null
        },
        // Initialisation du compte à rebours (à appeler 1 fois au chargement de la page)
        init: function() {
            // Récupération des références vers les éléments pour l'affichage
            // La référence n'est récupérée qu'une seule fois à l'initialisation pour optimiser les performances
            this.displayElement.day = jQuery('#countdown_day');
            this.displayElement.hour = jQuery('#countdown_hour');
            this.displayElement.min = jQuery('#countdown_min');
            this.displayElement.sec = jQuery('#countdown_sec');
 
            // Lancement du compte à rebours
            this.tick(); // Premier tick tout de suite
            window.setInterval("countdownManager.tick();", 1000); // Ticks suivant, répété toutes les secondes (1000 ms)
        },
        // Met à jour le compte à rebours (tic d'horloge)
        tick: function() {
            // Instant présent
            var timeNow = new Date();
 
            // On s'assure que le temps restant ne soit jamais négatif (ce qui est le cas dans le futur de targetTime)
            if (timeNow > this.targetTime) {
                timeNow = this.targetTime;
            }
 
            // Calcul du temps restant
            var diff = this.dateDiff(timeNow, this.targetTime);
 
            this.displayElement.day.text(diff.day);
            this.displayElement.hour.text(diff.hour);
            this.displayElement.min.text(diff.min);
            this.displayElement.sec.text(diff.sec);
        },
        // Calcul la différence entre 2 dates, en jour/heure/minute/seconde
        dateDiff: function(date1, date2) {
            var diff = {}                           // Initialisation du retour
            var tmp = date2 - date1;
 
            tmp = Math.floor(tmp / 1000);             // Nombre de secondes entre les 2 dates
            diff.sec = tmp % 60;                    // Extraction du nombre de secondes
            tmp = Math.floor((tmp - diff.sec) / 60);    // Nombre de minutes (partie entière)
            diff.min = tmp % 60;                    // Extraction du nombre de minutes
            tmp = Math.floor((tmp - diff.min) / 60);    // Nombre d'heures (entières)
            diff.hour = tmp % 24;                   // Extraction du nombre d'heures
            tmp = Math.floor((tmp - diff.hour) / 24);   // Nombre de jours restants
            diff.day = tmp;
 
            return diff;
        }
    };
 
    jQuery(function($) {
        // Lancement du compte à rebours au chargement de la page
        countdownManager.init();
    });
 
</script>
 
<body>
 
    <div id="countdown">
        <strong>Remaining time</strong> :
        <span id="countdown_day" >05</span> jours
        <span id="countdown_hour">11</span> heures
        <span id="countdown_min" >50</span> minutes
        <span id="countdown_sec" >22</span> secondes
    </div>
 
</body>

Tout ce que je peux supposer c'est que ton appel à ton fichier jquery est incorrect. Regarde ta console js (touche F12 sous chrome et IE, extension firebug sous firefox)

**L'aigle de Carthage** · 09/03/2014, 19h58

J'ai essayé votre code, mais ça m'affiche :

Remaining time : NaN jours NaN heures NaN minutes NaN secondes

Mêm j'ai fait l'appel du jQuery comme le votre!

**L'aigle de Carthage** · 09/03/2014, 20h00

Bizarre, le code fonctionne avec Chrome mais ne marche pas avec Firefox!!!

**Spartacusply** · 09/03/2014, 20h29

En effet, je testais sous chrome ^^

J'ai trouvé ce qui n'allait pas :

Code :

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

 targetTime: new Date('2015-04-05'),

Pas d'heure ni de minute, et le jour et le mois sur deux chiffres ("04" et non "4").

**L'aigle de Carthage** · 09/03/2014, 21h11

Merci beaucoup,

Juste deux dernières questions:

1- Comment je réinitialise le compte à rebours à chaque fois que j'accède à la page, parceque là quand je ferme la page et je l'ouvre de nouveau, le compteur continue à se decrémenter depuis la dernière fermeture.

2- Si je veux passer un paramètre pour déterminer la date cible d'une manière automatique, c'est à dire je ne veux pas mettre la valeur "2015-04-05" directement d'une façon statique dans le code. Comment je pourrai le faire?

Merci une fois

**Spartacusply** · 11/03/2014, 01h48

1- Comment je réinitialise le compte à rebours à chaque fois que j'accède à la page, parceque là quand je ferme la page et je l'ouvre de nouveau, le compteur continue à se decrémenter depuis la dernière fermeture.

Etant donné qu'il repart à chaque "tick" à partir de la date actuelle, je vois pas trop comment c'est possible... (javascript ne garde rien en mémoire à la fermeture de la page).

2- Si je veux passer un paramètre pour déterminer la date cible d'une manière automatique, c'est à dire je ne veux pas mettre la valeur "2015-04-05" directement d'une façon statique dans le code. Comment je pourrai le faire?

Absolument comme tu veux, tout ce qu'il faut c'est que tu passes en paramètre de la fonction "new Date" une chaîne de caractère formatée de la même manière que celle-ci (c'est à dire YYYY-MM-DD).

Compte à rebours

JavaScript

Discussions similaires

Partager

Partager