Assembler HTML, CSS et JS

Laurent -  
Laurent_44300 Messages postés 7 Statut Membre -
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.
A voir également:

6 réponses

Réponse 1 / 6
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
Bonjour

Ton code utilise la librairie jQuery.
Sauf que tu ne l'as pas incluse dans ta page.
0
Réponse 2 / 6
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
0
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
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.
0
Réponse 3 / 6
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.
0
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
Si tu commençais par répondre aux questions que je te pose ça permettrait d'avancer
0
Laurent_44300 Messages postés 7 Statut Membre > jordane45 Messages postés 40050 Statut Modérateur
 
Oui désolé.

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

Et la console JS indique ceci :

0
jordane45 Messages postés 40050 Statut Modérateur 4 757 > Laurent_44300 Messages postés 7 Statut Membre
 
Dans ce cas... Pourquoi avoir mis ce folder_name dans le chemin vers ton fichier jquery ??!
0
Réponse 4 / 6
Laurent_44300 Messages postés 7 Statut Membre
 
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
0
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
Donc là maintenant tu as corrigé ?
Donc ça devrait marcher non ?
0
Laurent_44300 Messages postés 7 Statut Membre > jordane45 Messages postés 40050 Statut Modérateur
 
Toujours pas malheureusement, le compteur reste bloqué à 0
0
jordane45 Messages postés 40050 Statut Modérateur 4 757 > Laurent_44300 Messages postés 7 Statut Membre
 
Montre ton code
Montre la console
0
jordane45 Messages postés 40050 Statut Modérateur 4 757 > jordane45 Messages postés 40050 Statut Modérateur
 
Nb: a lire AVANT de poster ton code

https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
0
Laurent_44300 Messages postés 7 Statut Membre > jordane45 Messages postés 40050 Statut Modérateur
  
<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>



0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
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>

0
Réponse 6 / 6
Laurent_44300 Messages postés 7 Statut Membre
 
OK ça fonctionne ! Merci infiniment pour ton aide précieuse ;)
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Balise </br>
erf -
erf -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse