Assembler HTML, CSS et JS

Laurent -  
Bonjour,

Je suis débutant et j'essaie de créer un compteur qui augmente jusqu'à un nombre "n" en un temps donné, en rassemblant html, css et js.
Le code que j'utilise est le suivant :

<html>
<head>
<style>
@import "https://fonts.googleapis.com/css?family=Abel&text=0123456789";
body {
font: normal 16px Abel;
color: #666;
}

table {
width: 100%;
text-align: center;
}

#sps {
color: #0A8;
}

#obs {
color: #6487af;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td class="compteur" id="obs"><b nbobs="10">0</b> Sommets</td>
</tr>
</tbody>
</table>
<script>
nbsps = 1093;

function compteur_anim(){
$('#obs.compteur b').animate(
{
nbsps: nbsps,
},
{
duration: 2500,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
},
}
);

$('#sps.compteur b').animate(
{
nbobs: nbobs,
},
{
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
},
}
);
}

compteur_anim();
</script>
</body>
</html>

Malheureusement cela ne fonctionne pas...
Quelqu'un peut-il m'aider et me dire ce qui ne va pas ?

Merci beaucoup pour vos retours.

6 réponses

  1.  jordane45 Modérateur
    Bonjour

    Ton code utilise la librairie jQuery.
    Sauf que tu ne l'as pas incluse dans ta page.
    1. Laurent
      Merci pour votre réponse.

      J'ai téléchargé le fichier (jquery-3.5.1.js) et je l'ai envoyé vers mon serveur.

      Puis j'ai ajouté cette ligne à mon code :
      <script src="folder_name/jquery-3.5.1.js"></script>

      Cela ne fonctionne toujours pas.

      Une solution ?

      Merci
      1. jordane45 Modérateur
        Tu as un dossier nommé folder_name ??
        pense également à regarder dans la console JavaScript de ton navigateur si il n'y a pas des messages d'erreur.
    2. Laurent
      Je galère...

      Voilà le rendu que je souhaite avoir : https://playcode.io/665269

      Peux-tu me guider dans le code html complet à rédiger ?
      Et quel fichier envoyer vers mon serveur ?

      Merci pour ton aide.
      1. jordane45 Modérateur
        Si tu commençais par répondre aux questions que je te pose ça permettrait d'avancer
      2. Laurent_44300
        @jordane45Oui désolé.

        Non je n'ai pas de dossier nommé folder_name.

        Et la console JS indique ceci :

      3. jordane45 Modérateur
        @Laurent_44300Dans ce cas... Pourquoi avoir mis ce folder_name dans le chemin vers ton fichier jquery ??!
    3. Laurent_44300
      C'est une erreur de ma part, je m'étais appuyé sur les indications de ce site :
      https://openclassrooms.com/fr/courses/3504441-introduction-a-jquery/3639651-ajoutez-jquery-a-votre-projet
      1. jordane45 Modérateur
        Donc là maintenant tu as corrigé ?
        Donc ça devrait marcher non ?
      2. Laurent_44300
        @jordane45Toujours pas malheureusement, le compteur reste bloqué à 0
      5. Laurent_44300
        @jordane45
        <html>
<head>
<style>
@import "https://fonts.googleapis.com/css?family=Abel&text=0123456789";
body {
font: normal 16px Abel;
color: #666;
}

table {
width: 100%;
text-align: center;
}

#sps {
color: #0A8;
}

#obs {
color: #6487af;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td class="compteur" id="obs"><b nbobs="10">0</b> Sommets</td>
</tr>
</tbody>
</table>
<script>
nbsps = 1093;

function compteur_anim(){
$('#obs.compteur b').animate(
{
nbsps: nbsps,
},
{
duration: 2500,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
},
}
);

$('#sps.compteur b').animate(
{
nbobs: nbobs,
},
{
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
},
}
);
}

compteur_anim();
</script>
<script src="/www/jquery-3.5.1.js"></script>
</body>
</html>


    5. jordane45 Modérateur
      On va gagner du temps... 
      <!Doctype html>
<html>
  <head>
    <title>TEST</title>
    <meta charset="utf8">
    <style>
      @import "https://fonts.googleapis.com/css?family=Abel&text=0123456789";
      body {
        font: normal 16px Abel;
        color: #666;
      }

      table {
        width: 100%;
        text-align: center;
      }

      #sps {
        color: #0A8;
      }

      #obs {
        color: #6487af;
      }
    </style>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td class="compteur" id="obs">
            <b nbobs="10">0</b> Sommets
            </td>
        </tr>
      </tbody>
    </table>
    
    <script src="jquery-3.5.1.js"></script>
    <script>
      var nbsps = 1093;
      var nbobs = 10;
      function compteur_anim(){
        $('#obs.compteur b').animate(
          {
            nbsps: nbsps,
          },
          {
            duration: 2500,
            easing: 'swing',
            step: function (now) {
            $(this).text(Math.ceil(now));
          },
          }
        );

        $('#sps.compteur b').animate(
          {
            nbobs: nbobs,
          },
          {
            duration: 4000,
            easing: 'swing',
            step: function (now) {
            $(this).text(Math.ceil(now));
          },
          }
        );
      }

      compteur_anim();
    </script>
  
  </body>
</html>

      1. Laurent_44300
        OK ça fonctionne ! Merci infiniment pour ton aide précieuse ;)

        Discussions similaires

        Problème d'accès à un site
        DR6993

        4 réponses
        Apache2 accès à autre que /var/www/html/index.html
        merithes

        3 réponses
        indice et exposant en css ?
        yiv

        19 réponses
        Analyser éléments js d'une page web ?
        Angstrom82

        7 réponses
        Javascript Arrondi à 2 chiffres après la virgule
        jeremy

        14 réponses