Afficher le temps restant setTimeout()

**apicultrice** · 25/07/2018, 12h01

Bonjour,

Je cherche à afficher le temps restant dans ma page php d'un setTimeout()

Code :

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

setTimeout("document.location.href='Essai.php?bascule=0'", 1800000);

Qui a une idée ?
Merci d'avance

**SpaceFrog** · 25/07/2018, 16h05

Voici une approche

https://codepen.io/anon/pen/XBgOVw

**apicultrice** · 25/07/2018, 16h29

Ok merci pour ta réponse

Je suis débutante en JS

Apparemment codepen.io est un simulateur
Je ne connaissais pas..
Le code ne fonctionne pas....ou j'ai rien compris

En fait mon code relance la même page toute les 30 mn et je voulais dans l'attente afficher le temps avant rafranchissement

**SpaceFrog** · 25/07/2018, 16h51

code pen est un ... code pen ...

Le code ne fonctionne pas....ou j'ai rien compris

ou ... :grin:

j'affiche en console le temps restant ...

je modifie un peu le code pour l'afficher sur la page au click sur le bouton

Quand tu cliques sur le bouton Lauch, ça déclenche le setTimout
En cliquant sur ???? ça affiche le temps restant

https://codepen.io/anon/pen/XBgOVw

**apicultrice** · 25/07/2018, 17h52

Ok j'ai compris...

Mais je voudrais l'afficher dans ma page en temps réel sans avoir à appuyer sur un bouton

Invité · 25/07/2018, 17h56

Bonjour happy-cultrice,

Compte à rebours : https://codepen.io/jreaux62/pen/OwgYaz

Code html :

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

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

Code JavaScript :

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
"use strict";
 // 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 " + (reload_delay - count_down)/1000 + ' secondes';
  window.setInterval(function() {
    count_down += count_down_delay;
    count_down_div.textContent = "rechargement dans " + (reload_delay - count_down)/1000 + ' secondes';
    if (count_down >= reload_delay) { count_down = 0; }
  }, count_down_delay);

@SpaceFrog
~~Pas réussi à faire fonctionner ton code..~~.
[EDIT] Normal : tu le mets dans le console.log !!

**apicultrice** · 25/07/2018, 18h44

La simulation fonctionne bien mais lorsque je l’insère dans mon script rien ne s'affiche

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
 
 
<script = "text/javascript">
 
 
    "use strict";
     // 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 " + (reload_delay - count_down)/1000 + ' secondes';
      window.setInterval(function() {
        count_down += count_down_delay;
        count_down_div.textContent = "rechargement dans " + (reload_delay - count_down)/1000 + ' secondes';
        if (count_down >= reload_delay) { count_down = 0; }
      }, count_down_delay);
 
 
</script>
<div id="count_down_div"></div>

Invité · 25/07/2018, 19h29

Bon.
Super !

Tu montres juste une copie de MON code....

Si tu n'en montres pas plus (au moins une PAGE EN LIGNE qu'on peut TESTER), on ne pourra RIEN dire de plus.

**apicultrice** · 25/07/2018, 19h44

Je l'ai testé en version minimaliste

Code html :

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
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Rucher Montminois</title>
	<link rel="stylesheet" href="styles4.css" type="text/css" media="screen" />
	<link rel="stylesheet" type="text/css" href="print.css" media="print" />
  <link rel="icon" type="image/png" href="favicon.png" />  
	<script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
  <script src="../js/highcharts.js"</script>
  <script src="../js/exporting.js"</script>
  <script type="text/javascript" src="../js/themes/grid.js"></script>
</head>
<body>
<div id="wrapper"><!-- #wrapper -->
  <header><!-- header -->
 
		<h1>Rucher Montminois</h1>
    <h3></h3>
 
 
    <script = "text/javascript">
 
 
    "use strict";
     // ici : le rechargement
    let reload_delay = 1000 * 60 * 30; // toutes les 30 minutes
    setTimeout("document.location.href='Essai.php'", 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 " + (reload_delay - count_down)/1000 + ' secondes';
      window.setInterval(function() {
        count_down += count_down_delay;
        count_down_div.textContent = "rechargement dans " + (reload_delay - count_down)/1000 + ' secondes';
        if (count_down >= reload_delay) { count_down = 0; }
      }, count_down_delay);
 
 
 
   </script>
 
 
	</header><!-- end of header -->  
 
  <section id="main"><!-- #main content and sidebar area -->
		<section id="content"><!-- #content -->
	    <article>
          <div id="count_down_div"></div>
 
     </article>           
  </section><!-- end of #content --> 
 
    </section><!-- end of #main content and sidebar-->  
  </div> 
</body>
<?php
$f='Compteur7.txt';
$style="styles1.css";
include("Footer.php"); ?> 
</html>

http://ruches.montminoises.free.fr/Essai.php

**Beginner.** · 25/07/2018, 20h35

Salut,

C'est normal que cela ne fonctionne pas puisque dans votre page il n'y a pas de div ayant pour identifiant "count_down_div"... Or c'est dans cette div que le décompte est affiché par le code de jreaux62... Il vous faut donc ajouter cette div quelque part dans votre page...

**apicultrice** · 25/07/2018, 21h03

Tu as dû mal lire

Code html :

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

1
2
3
<article>
    <div id="count_down_div"></div>
</article>

**Beginner.** · 25/07/2018, 21h32

Ah oui... Mais en fait c'est parce que cette div est placée après le script du coup au moment de l’exécution du script la div n'est pas encore chargée dans le Dom...

Placez votre script à la fin du <body>...

**Beginner.** · 25/07/2018, 21h41

Autre chose (un détail) je ne crois pas que ce soit correcte d'écrire <script = "text/javascript">...

Si vous ne voulez pas déplacer le script on peut aussi l’exécuter après le chargement du DOM, il y a des événements pour ça...

**ProgElecT** · 25/07/2018, 22h47

Salut

Pour moi avec le lien http://ruches.montminoises.free.fr/Essai.php, je vois bien la décrémentation

rechargement dans 1758 secondes ......
rechargement dans 1757 secondes ......
rechargement dans 1756 secondes ......

**apicultrice** · 25/07/2018, 22h57

Oui cela fonctionne
Merci à tous

**Beginner.** · 25/07/2018, 23h05

Oui chez moi aussi ça fonctionne désormais, je vois que le script a été déplacé...

Ceci dit la page web est étrange : il y a plusieurs balises DOCTYPE, html, body...

Invité · 26/07/2018, 10h20

Hello,

voilà un compte à rebours plus "réaliste" (en heure / min. / sec.) : https://codepen.io/jreaux62/pen/OwgYaz

Le script peut être placé n'importe où (même dans le <head>, mais le mieux est juste avant la balise </body>).

Code JavaScript :

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
"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();
});