Assembler HTML, CSS et JS
Laurent
-
Laurent_44300 Messages postés 7 Statut Membre -
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.
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
-
Bonjour
Ton code utilise la librairie jQuery.
Sauf que tu ne l'as pas incluse dans ta page.
-
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 -
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. -
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-
-
-
-
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 -
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>
-
OK ça fonctionne ! Merci infiniment pour ton aide précieuse ;)
