Convertir des chiffres en compteur countdoun

**ABWAB** · 09/05/2019, 06h38

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

Nom : Screenshot_2019-05-09 Projet SWEED.png
Affichages : 388
Taille : 172,4 Ko

Nom : Screenshot_2019-05-09 Projet SWEED.png
Affichages : 388
Taille : 172,4 Ko

**eleydet** · 09/05/2019, 08h27

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.

**ABWAB** · 09/05/2019, 19h09

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

**eleydet** · 09/05/2019, 21h18

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 :

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

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

**ABWAB** · 10/05/2019, 02h14

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

Convertir des chiffres en compteur countdoun

JavaScript

Vue hybride

Discussions similaires

Partager

Partager