Compte à rebours sur refresh sur page HTML

Version imprimable

Bonjour,

J'aimerais afficher un compte à rebours sur ma page WEB, qui correspond à mes script de refresh... voici les codes utilisés. Ils fonctionnent le problème n'est pas là... :-)

Code:

1
2
3
4
5
6
7
<script type="text/javascript">
window.onload=function() {
  window.setInterval(function() {
    window.frames.Example2.location.reload()
  },1000*120)
}
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
window.onload = function() {
  var URLs = [
    "fiche1.htm",
    "fiche2.htm",
    "fiche3.htm"
  ];
  var URLsLen = URLs.length;
  var ii = 0;
  var iframe2 = document.getElementById('Example2');
  iframe2.src = URLs[0]; //
  window.setInterval(function() {
    ii++;
    iframe2.src = URLs[ii % URLsLen]; // (% : modulo)
 // }, 1000 * 60 * 2); // toutes les 2 minutes
 }, 1000 * 15); // toutes les 3 s (EN TEST !)
};
</script>

Merci d'avance pour votre aide :-)

05/08/2018, 09h16
Invité

Bonjour,

la solution est donnée dans cette discussion récente.

Bonjour,

Le code suivant fonctionne, mais je n'arrive pas à la "fusionner" avec mes deux codes à moi... :?

Code qui fonctionne...

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
"use strict";
function launch_count_down()
{
  // ici : le rechargement
  let reload_delay = 1000 * 60 * 30; // toutes les 30 minutes
  setTimeout("document.location.href='Essai.php?bascule=0'", reload_delay);
 
  // Compte à rebours
  let count_down_div = document.getElementById("count_down_div");
  let count_down_delay = 1000 * 1; // toutes les 1 secondes
  let count_down = 0;
  count_down_div.textContent = 'Rechargement dans ' + heures_minutes_secondes( (reload_delay - count_down)/1000 );
  window.setInterval(function() {
    count_down += count_down_delay;
    count_down_div.textContent = 'Rechargement dans ' + heures_minutes_secondes( (reload_delay - count_down)/1000 );
    if (count_down >= reload_delay) { count_down = 0; }
  }, count_down_delay);
}
 
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();
  }
}
 
//window.onload = launch_count_down;
document.addEventListener('DOMContentLoaded', function(event) {
  launch_count_down();
});

Code:

<div id="count_down_div"></div>

Mes deux codes...

Code:

1
2
3
4
5
6
7
<script type="text/javascript">
window.onload=function() {
  window.setInterval(function() {
    window.frames.Example2.location.reload()
  },1000*120)
}
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
window.onload = function() {
  var URLs = [
    "fiche1.htm",
    "fiche2.htm",
    "fiche3.htm"
  ];
  var URLsLen = URLs.length;
  var ii = 0;
  var iframe2 = document.getElementById('Example2');
  iframe2.src = URLs[0]; //
  window.setInterval(function() {
    ii++;
    iframe2.src = URLs[ii % URLsLen]; // (% : modulo)
 // }, 1000 * 60 * 2); // toutes les 2 minutes
 }, 1000 * 15); // toutes les 15 s (EN TEST !)
};
</script>

07/08/2018, 15h59
NoSmoking

Bonjour,
si tu écrits deux affectations, window.onload=function() {, la dernière affectation REMPLACE les précédentes affectations.

Une solution consiste à mettre TOUS tes appels dans le window.onload.

Un autre consiste à utiliser addEventListener, en groupant ou non tous tes apples/fonctions.
07/08/2018, 19h31
Crachover

Bonjour,

Merci pour les informations, mais n'étant pas "du tout" un pro en JavaScript, je sèche un max... :(

Serait-ce abuser de vous demander un exemple avec par exemple mon premier code, voir les deux... ? :roll::oops:

Ps : Cette page sera affichée sur une TV, et juste pour info, ma TV n'accepte pas les LET, elle veut obligatoirement des VAR pour déclarer les variables...

Merci d'avance :D
07/08/2018, 23h11
Watilin

Moi ce qui me surprend c’est que tu as d’un côté un script qui rafraîchit l’iframe, et de l’autre côté un script qui change l’URL de la même iframe. Faire les deux à la fois, c’est inefficace car ça crée du trafic inutile.

Pourrais-tu nous expliquer, en langage courant, ce que tes scripts de refresh sont censés faire ?
08/08/2018, 07h03
Crachover

Bonjour,

Les deux script sont effectivement très différents, le premier fait un 'simple' refresh d'une iFrame , l'autre change le contenu d'un iFrame ... pourquoi... :roll:

J'ai créé en Excel un fichier ou je rentre les résultats des matchs de tennis du week-end de mon club, lorsque je sauve cette page, elle créé des fichiers HTML et les envoies en FTP sur le WEB, le premier reprend la totalité des matchs du week-end et l'affiche sur une SMART TV, et un refresh est fait toutes les 2 minutes pour actualiser la page.

le problème est qu'il y a beaucoup d'informations sur cette page, donc pas très lisible sur certaine TV... C'est là que le 2ème script intervient... mon fichier Excel créé aussi plusieurs pages reprenant sur chacune d'elles 5 matchs... et le script affiche ces pages...

voila pourquoi les deux fichiers sont différents. Mais ils ont une chose en commun, il y a une temporisation, soit pour faire un refresh, soit pour charger la page avec un URL différent... et c'est cette temporisation que j'aimerais afficher...

Pourquoi des iFrame, parce que mes pages contiennent un iFrame avec un "titre" et un autre iFrame avec la ou les pages à afficher... et comme il y a des 'refresh' assez souvent, j'ai allégé le truc en ne chargeant le titre qu'une fois...

J'aimerais donc pouvoir afficher le temps restant avant 'refresh' ou changement de page sur l'iFrame 'titre' ou l'autre...

Voili voilo :roll:
08/08/2018, 08h35
Invité
Bonjour,

1- On en avait parlé dans une discussion précédente.
Et son utilisation sur une télévision.

Citation:

Envoyé par Crachover

...Les deux script sont effectivement très différents, le premier fait un 'simple' refresh d'une iFrame , l'autre change le contenu d'un iFrame ...

2- NON.
1. ils font à peu près la MEME CHOSE (recharger/charger une iframe)
2. il s'agit de LA MEME iframe !
3- Le 2ème script est censé remplacer le 1er ! Pas venir s'ajouter...
D'ailleurs, comme l'a remarqué NoSmoking, seul le 2ème est exécuté !
Tu peux supprimer le 1er.

Au fait : tu as remarqué que tu changeais de page toutes les 15 secondes ? :aie:
Code:

1 2 // }, 1000 * 60 * 2); // toutes les 2 minutes }, 1000 * 15); // toutes les 15 s (EN TEST !)
4- Concernant le compte à rebours :
Où vas-tu mettre le code d'affichage : <div id="count_down_div"></div> ?

Voilà ton 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// ------------------------
window.onload = function() {
  var URLs = [
    "fiche1.htm",
    "fiche2.htm",
    "fiche3.htm"
  ];
  var URLsLen = URLs.length;
  var ii = 0;
  var iframe2 = document.getElementById("Example2");
 
  var reload_delay = 1000 * 60 * 2; // toutes les 2 minutes
  iframe2.src = URLs[0];
 
  launch_count_down(reload_delay); // lance le compte à rebours
 
  window.setInterval(function() {
    ii++;
    iframe2.src = URLs[ii % URLsLen]; // (% : modulo)
  }, 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 = "Rechargement dans " + heures_minutes_secondes((count_down_delay) / 1000);
  window.setInterval(function() {
    count_down += count_delay;
    count_down_div.textContent = "Rechargement 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();
  }
}

Cela dit : 15 secondes, c'est largement suffisant pour lire une page !
Et les 3 pages sont affichées en moins d'une minute...

09/08/2018, 22h54
Crachover

Tout fonctionne super :D:D:D

Merci beaucoup :)