Afficher le temps restant setTimeout()

Version imprimable

25/07/2018, 12h01
apicultrice

Afficher le temps restant setTimeout()

Bonjour,

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

Code:

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

Qui a une idée ?
Merci d'avance
25/07/2018, 16h05
SpaceFrog

Voici une approche

https://codepen.io/anon/pen/XBgOVw
25/07/2018, 16h29
apicultrice

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 :roll:

En fait mon code relance la même page toute les 30 mn et je voulais dans l'attente afficher le temps avant rafranchissement
25/07/2018, 16h51
SpaceFrog

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

Citation:

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
25/07/2018, 17h52
apicultrice

Ok j'ai compris...

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

Bonjour happy-cultrice, ;)

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

Code:

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

Code:

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..~~. :oops:
[EDIT] Normal : tu le mets dans le console.log !!

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

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
 
 
<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>

25/07/2018, 19h29
Invité

Bon.
Super ! :roll: 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.

Je l'ai testé en version minimaliste

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
<?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

25/07/2018, 20h35
Beginner.

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...

Tu as dû mal lire

Code:

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

25/07/2018, 21h32
Beginner.

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>...
25/07/2018, 21h41
Beginner.

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...
25/07/2018, 22h47
ProgElecT

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 ......
25/07/2018, 22h57
apicultrice

Oui cela fonctionne
Merci à tous
25/07/2018, 23h05
Beginner.

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...

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:

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>

26/07/2018, 11h09
apicultrice

oui cela fonctionne bien

Merci