Assembler HTML, CSS et JS

Fermé

Laurent - 5 sept. 2020 à 20:45
Laurent_44300 Messages postés 6 Date d'inscription dimanche 6 septembre 2020 Statut Membre Dernière intervention 6 septembre 2020 - 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.

A voir également:

Assembler HTML, CSS et JS
Comment assembler des pdf - Guide
Editeur html - Télécharger - HTML
Html download - Télécharger - HTML
Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Windows
Trait css ✓ - Forum CSS

6 réponses

Réponse 1 / 6

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649
5 sept. 2020 à 20:54

Bonjour

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

Réponse 2 / 6

Laurent
5 sept. 2020 à 21:49

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 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649
Modifié le 5 sept. 2020 à 22:26

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
Modifié le 6 sept. 2020 à 00:10

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 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649
6 sept. 2020 à 00:17

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 dimanche 6 septembre 2020 Statut Membre Dernière intervention 6 septembre 2020 > jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024
6 sept. 2020 à 00:35

Oui désolé.

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

Et la console JS indique ceci :

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649 > Laurent_44300 Messages postés 6 Date d'inscription dimanche 6 septembre 2020 Statut Membre Dernière intervention 6 septembre 2020
6 sept. 2020 à 00:40

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 dimanche 6 septembre 2020 Statut Membre Dernière intervention 6 septembre 2020
6 sept. 2020 à 01:17

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 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649
6 sept. 2020 à 01:23

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

Toujours pas malheureusement, le compteur reste bloqué à 0

Montre ton code
Montre la console

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649 > jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024
6 sept. 2020 à 09:17

Nb: a lire AVANT de poster ton code

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

<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 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649
6 sept. 2020 à 16:56

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 dimanche 6 septembre 2020 Statut Membre Dernière intervention 6 septembre 2020
6 sept. 2020 à 17:14

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

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

&nbsp ; Quelle Fonction ?

Espace en HTML

[CSS] Forcé retour à la ligne

la balise <br> ou <br />

Discussions similaires

Newsletters