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)

Compte à rebours

JavaScript

Vue hybride

Discussions similaires

Partager

Partager