Convertir des chiffres en compteur countdoun

Version imprimable

1 pièce(s) jointe(s)

bonjour, je suis entrain de créer un site web. et j'ai créer un canevas de chiffre que j'aimerais animé pour en faire un compteur d'évènement .

voici le code HTML de la partie du site. vous trouverez ci-joint l'image de la partie en question.

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
        <section class="divider parallax " data-stellar-background-ratio="0.5" data-bg-img="images/bg1.JPG">
        <div class="container pt-90 pb-90">
          <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-4">
                  <h3 class="line-bottom" style="font-size: 35px; color: rgb(245, 245, 245);">Notre prochaine table ronde est dans</h3>
                </div> 
 
            <div class="col-xs-12 col-sm-6 col-md-2 mb-md-50" >
              <div class="funfact style-1 pb-15 pt-15 p-20 bg-per" >
 
                <h2 class="animate-number text-theme-blx mt-0 font-48 " data-value="25" data-animation-duration="2000" > 0</h2>
                <div class="clearfix"></div>
                <h4 class="text-uppercase font-19 align-center">Jours</h4>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2 mb-md-50">
              <div class="funfact style-1 pb-15 pt-15 p-20 bg-per"  style="text-align: center;"> 
 
                <h2 class="animate-number text-theme-blx mt-0 font-48" data-value="10" data-animation-duration="2500">0</h2>
                <div class="clearfix"></div>
                <h4 class="text-uppercase font-19">Heures</h4>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2 mb-md-50">
              <div class="funfact style-1 pb-15 pt-15 p-20 bg-per"  style="text-align: center;">
 
                <h2 class="animate-number text-theme-blx mt-0 font-48" data-value="20" data-animation-duration="3000">0</h2>
                <div class="clearfix"></div>
                <h4 class="text-uppercase font-19">Minutes</h4>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2 mb-md-50">
              <div class="funfact style-1 pb-15 pt-15 p-20 bg-per"  style="text-align: center;">
 
                <h2 class="animate-number text-theme-blx mt-0 font-48" data-value="30" data-animation-duration="2500">0</h2>
                <div class="clearfix"></div>
                <h4 class="text-uppercase font-19">Secondes</h4>
              </div>
            </div>
          </div>
        </div>
      </section>

si vous savez comment je peux le faire je reste a l’écoute. Merci d'avance pour votre contribution.

Pièce jointe 473264

09/05/2019, 08h27
eleydet

Bonjour,

La date peut être récupérée sur le client ou sur le serveur. Dans le premier cas, il vous faut espérer que l'heure du client soit correctement configurée. Dans le deuxième cas, vous pouvez vérifier que l'heure du serveur est effectivement bien configurée. Je préfère donc la deuxième solution.

Pour récupérer l'heure sur le serveur... les solutions sont nombreuses. Je verrais bien une requête ajax envoyée toutes les minutes. Est-il utile d'afficher les secondes? Il est possible de le faire mais cela complique le code.
09/05/2019, 19h09
ABWAB

Merci pour ta réponse oui je voudrais affiché les secondes .

Bonsoir,

Ci-dessous, un début de code à développer. Une requête toutes les secondes, c'est un peu lourd, mais bon...

Fichier date.php :

Code:

1
2
3
4
5
6
7
8
<?php
  $horaire=getdate();
  $heure=$horaire["hours"];
  $min=$horaire["minutes"];
  $sec=$horaire["seconds"];
  $retour="{\"heures\":".$heure.",\"minutes\":".$min.",\"secondes\":".$sec."}";
  echo $retour;
?>

Fichier index.html

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
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <script>
    function requete() {
      var xhr=new XMLHttpRequest();
      xhr.open("GET", "date.php", true);
      xhr.send(null);
      xhr.onreadystatechange=function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
           var horaire = JSON.parse(xhr.responseText);
           document.getElementById("h").innerHTML=horaire.heures;
           document.getElementById("m").innerHTML=horaire.minutes;
           document.getElementById("s").innerHTML=horaire.secondes;
        }
      };
    }
    window.onload=function() {
      requete();
      setInterval(requete,1000);
    };
  </script>
</head>
 
<body>
  <p>Heures : <span id="h"></span> h</p> 
  <p>Minutes : <span id="m"></span> min</p> 
  <p>Secondes : <span id="s"></span> s</p> 
</body>
 
</html>

10/05/2019, 02h14
ABWAB

Merci infiniment je vais essayé le code et je vous reviens.