Faire cohabiter un compte à rebours et l'heure (deux codes)

Version imprimable

Bonjour,

J'ai deux codes :

affiche un compte à rebours avec actualisation d'un iframe définit après 2 minutes
affiche l'heure

Et je n'arrive pas à les faire cohabiter, l'heure prend le dessus sur le compte à rebours...

Voici mes codes...

Codes pour l'heure

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
function date_heure(id)
{
        date = new Date;
        annee = date.getFullYear();
        moi = date.getMonth();
        mois = new Array('Janvier', 'F&eacute;vrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao&ucirc;t', 'Septembre', 'Octobre', 'Novembre', 'D&eacute;cembre');
        j = date.getDate();
        jour = date.getDay();
        jours = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
        // resultat = 'Nous sommes le '+jours[jour]+' '+j+' '+mois[moi]+' '+annee+' Il est '+h+':'+m+':'+s;
	    resultat = h+':'+m+':'+s;
        document.getElementById(id).innerHTML = resultat;
        setTimeout('date_heure("'+id+'");','1000');
        return true;
}

Code:

<script type="text/javascript">window.onload = date_heure('date_heure');</script>

Codes pour le compte à rebours et l'actualisation de l'iframe

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
<script type="text/javascript">
// ------------------------
window.onload=function() {
 
 
	 var reload_delay = 1000 * 1 * 121; // toutes les 2 minutes
 
  launch_count_down(reload_delay); // lance le compte à rebour
 
  window.setInterval(function() {
 
 
    window.frames.Example2.location.reload()
    window.frames.messagei.location.reload()
  }, reload_delay);		
};
 
// ------------------------
function launch_count_down(count_down_delay) {
  // Compte à rebours
  var count_down_div = document.getElementById("count_down_div");
  var count_down = 0;
  var count_delay = 1000; // a chaque seconde
  count_down_div.textContent = "Actualisation de l'écran dans " + heures_minutes_secondes((count_down_delay) / 1000)+"''";
  window.setInterval(function() {
    count_down += count_delay;
    count_down_div.textContent = "Actualisation de l'écran dans " + heures_minutes_secondes((count_down_delay - count_down) / 1000)+"''";
    if( count_down == count_down_delay ){
      count_down = 0; // on réinitalise
    }
  }, count_delay);
}
 
// ------------------------
function heures_minutes_secondes(secondes) {
  var temps = new Date();
  temps.setTime(secondes * 1000);
  if (secondes > 60 * 60) {
    // supérieur à 1 heure
    return (
      temps.getHours() - 1 + ":" + temps.getMinutes() + "' " + temps.getSeconds()
    );
  } else {
    return temps.getMinutes() + "' " +temps.getSeconds();
  }
}
</script>

Code:

<div style="background-color:#000000; font-family:Calibri, sans-serif; color:#A6A6A6; font-size:10.0pt;font-style:italic; text-align:left;" id="count_down_div"></div>

Ma question, est-il possible d'afficher les deux en même temps sur la même page...

Ps : séparément, les deux fonctionnent très bien.

Merci d'avance

:salut:

Manque de rigueur dans la déclaration des variables, proscrire les variables globales et abandonner "var" au profit de "let".

Code:

1
2
<div id="testHeure"></div>
<div id="count_down_div"></div>

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const elemTestHeure = document.getElementById("testHeure");
 
    function date_heure() {
        const
            mois = new Array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'),
            jours = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');
 
        let
            date = new Date,
            annee = date.getFullYear(),
            moi = date.getMonth(),
            j = date.getDate(),
            jour = date.getDay(),
            h = date.getHours(),
            m = date.getMinutes(),
            s = date.getSeconds();
 
        if (h < 10) {
            h = "0" + h;
        }
 
        if (m < 10) {
            m = "0" + m;
        }
 
        if (s < 10) {
            s = "0" + s;
        }
 
        let resultat = 'Nous sommes le ' + jours[jour] + ' ' + j + ' ' + mois[moi] + ' ' + annee + ' Il est ' + h + ':' + m + ':' + s;
 
        elemTestHeure.innerHTML = resultat;
 
        setTimeout(() => {
            date_heure(id);
        }, '1000');
 
        return true;
    }
 
    function heures_minutes_secondes(secondes) {
        let temps = new Date();
 
        temps.setTime(secondes * 1000);
 
        if (secondes > 60 * 60) {
            // supérieur à 1 heure
            return (temps.getHours() - 1 + ":" + temps.getMinutes() + "' " + temps.getSeconds());
        } else {
            return (temps.getMinutes() + "' " + temps.getSeconds());
        }
    }
 
    function launch_count_down(count_down_delay) {
        // Compte à rebours
        let 
            count_down_div = document.getElementById("count_down_div"),
            count_down = 0,
            count_delay = 1000; // 1s
 
        count_down_div.textContent = "Actualisation de l'écran dans " + heures_minutes_secondes((count_down_delay) / 1000) + "''";
 
        setInterval(function () {
            count_down += count_delay;
            count_down_div.textContent = "Actualisation de l'écran dans " + heures_minutes_secondes((count_down_delay - count_down) / 1000) + "''";
 
            if (count_down == count_down_delay) {
                count_down = 0; // on réinitalise
 
                console.log(`reload iframes`);
            }
        }, count_delay);
    }
 
    launch_count_down(20000); // lance le compte à rebour pour 20s
    date_heure();
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

05/10/2018, 12h50
Invité
Bonjour,

Pour donner l'explication simple à ton problème : tu ne peux pas avoir 2 window.onload dans la page.
Il faut regrouper :
Code:

1 2 3 4 window.onload = function(){ date_heure(.....); launch_count_down(......); }
Ou avec la syntaxe de mon collègue ci-dessus.

Sachant que les fonctions elles-mêmes (function ...) n'ont pas besoin d'être "à l'intérieur".
05/10/2018, 13h34
CrasherSEP
Merci pour vos réponses, je vais tester...

Maintenant, je suis obligé d'utiliser des variables VAR, car le navigateur de ma SMART TV n'accepte pas les LET :(

EDIT :

J'arrive à utiliser vos codes, le compte à rebours fonctionne, mais l'heure s'affiche mais ne se met pas à jour... de plus, j'ai l'impression que le morceau de code suivant à disparu... il est utilisé pour ne mettre QUE ces deux iframe à jour toutes les deux minutes...
Code:

1 2 3 4 5 6 window.setInterval(function() { window.frames.Example2.location.reload() window.frames.messagei.location.reload() }, reload_delay);