Assembler HTML, CSS et JS

Laurent -
Laurent_44300 Messages postés 6 Date d'inscription Statut Membre Dernière intervention - 6 sept. 2020 à 17:14

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.

Afficher la suite

A voir également:

Assembler HTML, CSS et JS
Nasm assembler - Télécharger - Édition & Programmation
Editeur html - Télécharger - HTML
Assembler pdf - Guide
Br html ✓ - Forum Webmastering
Assembler video ✓ - Forum Logiciels

6 réponses

Réponse 1 / 6

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 753

Bonjour

Ton code utilise la librairie jQuery.
Sauf que tu ne l'as pas incluse dans ta page.

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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 753

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.

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.

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 753

Si tu commençais par répondre aux questions que je te pose ça permettrait d'avancer

Laurent_44300 Messages postés 6 Date d'inscription Statut Membre Dernière intervention > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

Oui désolé.

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

Et la console JS indique ceci :

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 753 > Laurent_44300 Messages postés 6 Date d'inscription Statut Membre Dernière intervention

Dans ce cas... Pourquoi avoir mis ce folder_name dans le chemin vers ton fichier jquery ??!

Réponse 4 / 6

Laurent_44300 Messages postés 6 Date d'inscription Statut Membre Dernière intervention

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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 753

Donc là maintenant tu as corrigé ?
Donc ça devrait marcher non ?

Laurent_44300 Messages postés 6 Date d'inscription Statut Membre Dernière intervention > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

Toujours pas malheureusement, le compteur reste bloqué à 0

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 753 > Laurent_44300 Messages postés 6 Date d'inscription Statut Membre Dernière intervention

Montre ton code
Montre la console

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 753 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

Nb: a lire AVANT de poster ton code

https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Laurent_44300 Messages postés 6 Date d'inscription Statut Membre Dernière intervention > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

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

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

Posez votre question

Réponse 5 / 6

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 753

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>

Réponse 6 / 6

Laurent_44300 Messages postés 6 Date d'inscription Statut Membre Dernière intervention

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

Discussions similaires

la balise <br> ou <br />

Javascript Arrondi à 2 chiffres après la virgule

Balise </br>

Espace en HTML

Votre réponse

Discussions similaires