Fermer
DéveloppementWeb

Un compte à rebours entièrement en jQuery et CSS

Un compte à rebours entièrement en jQuery – Taille du compteur

Il y a plus d’un an, je vous présentais un article permettant de créer un compte à rebours et un compteur à la manière de celui d’Apple à l’aide des technologies HTML, CSS et JavaScript. Celui-ci, est une réussite du BlogNT puisqu’il a été vu de nombreuses fois, et beaucoup de commentaires ont été formulés.

Mais, ce compteur comportait quelques limites :

  • Difficulté de personnalisation
  • Les chiffres dépendent d’images

Donc, pour palier à ces problèmes, je vous propose la création d’un nouveau compte à rebours, que j’ai pu découvrir lors de mes recherches sur le Web. Celui-ci va être idéal pour combler les lacunes du précédent. Ainsi, vous allez pouvoir annoncer un événement sur votre site, le lancement d’un produit, etc…

Ainsi, nous allons construire ce compte à rebours à l’aide d’un plugin jQuery, qui est disponible sur Github.

Allez, commençons le développement.

La structure HTML

La première chose à noter, c’est que le code HTML va être très très simple. Pour vous le prouver, sachez que vous aurez seulement besoin de mentionner : <div id="countdown"></div>.

Pourquoi ? Tout simplement car le code HTML est directement produit par le JavaScript tel que nous le verrons par la suite de cet article. Voici le code HTML généré :

[sourcecode language= »HTML »]
<div id="countdown" class="countdownHolder">
<span class="countDays">
<span class="position">
<span class="digit static"></span>
</span>
<span class="position">
<span class="digit static"></span>
</span>
</span>
<span class="countDiv countDiv0"></span>
<span class="countHours">
<span class="position">
<span class="digit static"></span>
</span>
<span class="position">
<span class="digit static"></span>
</span>
</span>
<span class="countDiv countDiv1"></span>
<span class="countMinutes">
<span class="position">
<span class="digit static"></span>
</span>
<span class="position">
<span class="digit static"></span>
</span>
</span>
<span class="countDiv countDiv2"></span>
<span class="countSeconds">
<span class="position">
<span class="digit static"></span>
</span>
<span class="position">
<span class="digit static"></span>
</span>
</span>
</div>
[/sourcecode]

Si l’on analyse le code ci-dessus, on peut voir qu’une classe (countdownHolder) a été ajoutée à notre div. Celle-ci va simplement permettre d’appliquer des styles à notre compte à rebours.
De plus, on va pouvoir retrouver de nouveaux éléments (span) qui permettent l’insertion du nombre de jours, heures, minutes et secondes restantes avant la date initialisée. Cela signifie que nous ne pourrons pas dépasser 99 jours dans le décompte de l’événement.

Les styles CSS

Cette partie manquait cruellement dans le compteur « made in Apple » ! En effet, il était impossible de choisir la couleur, la taille, etc… des éléments qui constituaient le compte à rebours, et ce à cause des images.
Mais, dans le plugin présenté, il est tout à fait possible de personnaliser celui-ci. Je vais vous présenter les principaux styles sur lesquels vous allez pouvoir jouer.

  • On commence par le principal : la taille des chiffres. Celle-ci est configurable en jouant sur la propriété font-size de la classe countDays. Ainsi, il vous suffit d’augmenter ou de diminuer la taille en pixel afin d’agrandir ou réduire le compteur
[sourcecode language= »CSS »]
.countdownHolder{

font: 40px/1.5 ‘Open Sans Condensed’,sans-serif;

}
[/sourcecode]
Un compte à rebours entièrement en jQuery - Taille du compteur
Un compte à rebours entièrement en jQuery - Rétrécissement de la taille du compteur
  • Ensuite, vous allez pouvoir agir sur l’aspect des chiffres. Pour cela, nous allons modifier le contenu de la classe .digit et .digit.static, et plus particulièrement les attributs background-image et color comme commentés ci-dessous :
[sourcecode language= »CSS »]
.digit.static {
// Permet d’ajouter une ombre portée sur n’importe quel élément HTML
box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);

// La valeur linear-gradient de la propriété background-image permet de générer
// des arrière-plans de couleur dégradée, d’une couleur à l’autre ou via plusieurs
// couleurs intermédiaires
// La notation est la suivante : (orientation du dégradé (top/right/bottom/left),
// couleurs (position en %))
background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, #3A3A3A),
color-stop(0.5, #444444)
);
}

.digit{
position:absolute;
display:block;
width:1em;
background-color:#444;
border-radius:0.2em;
text-align:center;
// couleur des chiffres
color:#fff;
letter-spacing:-1px;
}
[/sourcecode]

Un compte à rebours entièrement en jQuery - Changement de couleur

Bien sûr, il existe d’autres propriétés sur lesquelles vous allez pouvoir jouer, mais ici je vous ai donné les principales, autrement dit, celles qui étaient nécessaires par rapport à la version du compte à rebours Apple.

Le JavaScript

Il s’agit certainement de la partie la plus importante du code. En effet, la partie script va permettre de générer le code HTML. Je ne vais pas entrer dans les détails des fonctions JavaScript du plugin, mais je vais plutôt m’attarder sur le code JS d’appel.

En effet, afin de créer votre compteur vous allez devoir l’appeler comme ci-dessous. Tout d’abord, nous allons définir quelques variables, dont notre date à laquelle nous souhaitons définir notre événement :

[sourcecode language= »JavaScript »]
// On récupère l’élément ‘note’ dans lequel on va inscrire des informations
var note = $(‘#note’);
// Création de l’objet ‘date’ (année / mois / jour) ici initialisé au : 9 mars 2012
// Attention les mois commencent à 0 !
var ts = new Date(2012, 2, 9);
[/sourcecode]

Puis, on appelle la fonction countdown dans laquelle on définit le timestamp, et la fonction de retour (callback), dont la particularité est qu’elle est appelée celle l’ayant reçu en tant que paramètre.

[sourcecode language= »JavaScript »]
$(‘#countdown’).countdown({
timestamp : ts,
callback : function(days, hours, minutes, seconds){

}
});
[/sourcecode]

Enfin, on affiche notre message dans l’élément note :

[sourcecode language= »JavaScript »]
var message = "";

message += days + " jour" + ( days==1 ?  »:’s’ ) + ", ";
message += hours + " heur" + ( hours==1 ?  »:’s’ ) + ", ";
message += minutes + " minute" + ( minutes==1 ?  »:’s’ ) + " and ";
message += seconds + " seconde" + ( seconds==1 ?  »:’s’ ) + " <br />";

if (newYear) {
message += "avant l’événement !";
}
else {
message += "Il ne reste plus 10 jours à partir de maintenant !";
}

note.html(message);
[/sourcecode]

Bien sûr, pour que cela fonctionne vous devrez inclure le fichier CSS et JavaScript dans votre page.

Et voilà c’est fait ! Il ne vous reste plus qu’à laisser votre imagination faire le reste 😉

Un compte à rebours entièrement en jQuery

[samples id=10704]

Conclusion

Vous pouvez utiliser ce script en tant que complément parfait à chaque page de lancement. Comme je l’ai décris ci-dessus, la chose très intéressante est qu’il n’utilise pas une seule image, tout est fait en CSS. Ainsi, vous si vous augmentez ou diminuez la taille de police, le compteur sera modifié.
De plus, vous avez seulement besoin de la déclaration display:none afin de masquer les unités dont vous n’avez pas besoin.

Que pensez-vous de ce compteur ? Comble t-il tous vos besoins ? Si vous avez des difficultés dans sa mise en oeuvre, n’hésitez pas à le mentionner dans la partie commentaires ci-dessous.

Mots-clé : compteurcountercsshtmlJavaScriptjquerypluginsamples
Yohann Poiron

L’auteur Yohann Poiron

J'ai fondé le BlogNT en 2010. Autodidacte en matière de développement de sites en PHP, j’ai toujours poussé ma curiosité sur les sujets et les actualités du Web. Je suis actuellement engagé en tant qu'architecte interopérabilité.
  • Ah net amélioration en effet !
    J’étais tombé sur l’ancien compte à rebours mais le fait d’utiliser des images m’avait fais reculer..

  • Pingback: L’heure, un compte à rebours et un compteur à la façon Apple : HTML, CSS, JS | Le blog des nouvelles technologies : Web, Technologies, Développement, Interopérabilité()

  • Kavel Inox

    Excellent tuto, merci beaucoup 🙂

  • Luky_vj

    Et pour un chronomètre uniquement en CSS3 

    http://cssdeck.com/item/210/css3-digital-stopwatch

  • chamu

    Bonjour, il ne fonctionne pas sous IE ce compteur, vraiment dommage 🙁

    • Ah zut je regarde de suite !

      • chamu

        Merci, est ce que vous avez corrigé ?

        • Je viens de corriger le problème sur IE9 ! En revanche, sous IE8 le problème persiste… j’essaie au mieux de le résoudre

  • Godzila10

    Bonjour ,

    Comment fait-on pour changer le jour et l’heure pour le conte a rebour .

    • Bonjour,

      Il suffit de modifier la ligne de la date dans le script JavaScript

  • Gysmo

    Bonjour,
    Que faut il modifier pour que le compteur soit compatible I.E ?
    Merci

    • Normalement il l’est déjà 😉

      • Gysmo

        Sous I.E 8 seul la serie de point apparait ( voir capture), le code source de la page est en HTML5, tous les éléments sont en place, sauf le compte à rebours

        • Je viens de tester sous IE8 c’est 100% fonctionnelle ! Je remets à jour le ZIP au cas où…

          • Simone

            Bonjour,
            Il reste un problème de compatibilité sous IE7 qui induit que les chiffres s’affichent à moitié !
            Dommage car sinon très bon outil !

        • Gysmo

          Avec le nouveau Zip c’est ok….

  • Dechet

    Bonjour, comment fait-on lorsque il reste par exemple 190 jours ?
    Merci d’avance pour votre aide !
    JP

  • Je ne comprends pas la question…

    • Dechet

      Désolé si je n’ai pas été assez clair, en fait ça rejoint la question d’Ardilla ci dessus. Si jamais Ardilla, entre temps, j’ai simplement ajouté un 1 dans un span avec la même classe que les autres chiffres, je l’enlèverai manuellement 🙂

  • Ardilla

    Bonjour, vous avez écrit que le décompte ne peut dépasser les 99 jours. Est-ce possible de contourner cela pour afficher un décompte à plus de 100 jours ?
    Merci !

  • Côme

    Bonjour,
    Perso je suis resté sur l’ancien compte à rebours qui me va très bien. J’ai réussi à réglé l’heure grace aux différents commentaires. Par contre je n’arrive pas à faire arrêter le compte à rebours à zero. Je suis une brêle en javascript et tout ce que j’ai essayé dans la baliseif (endCountdown == nowCountdown) {  }n’a rien donné. Et sauf erreur de ma part, je n’ai pas vus dans ce nouveau tuto une explication.Comment faire ?Merci de votre aide

  • Oui vous avez la possibilité en ajoutant vous même un span avec le chiffre au sein de celui-ci. Au moment venu, c’est-à-dire lorsqu’il restera 99 jours, il faudra supprimer celui-ci ! 

  • Dans cette version le compteur s’arrêtera ! 

    • Côme

      Ok je vais essayer alors. Merci !

      Et question bête, ça serait au top si à la fin ça pouvais activer une redirection de page. J’ai essayé avec une balise window.location mais ça n’a pas marché… Je vais tenter avec celui-ci ! 

  • antoine

    Bonjour,
    Est-il possible d’intégrer une fonction php dans le script afin que le compte à rebours prenne en compte l’heure du serveur et non celle du PC pour faire le décompte?

    • Oui tout à fait aucun problème !

      • antoine

        Pourriez-vous m’indiquer
        qu’elle partie du script doit être modifiée pour que le compteur puisse fonctionner avec l’heure du serveur ? J’ai remplacé cette ligne mais cela ne marche toujours
        pas.// Time left
        left = Math.floor((options.timestamp – (new Date())) / 1000);

      • antoine

        Pourriez-vous m’indiquer
        qu’elle partie du script doit être modifiée pour que le compteur puisse fonctionner avec l’heure du serveur ? J’ai remplacé cette ligne mais cela ne marche toujours
        pas.
        // Time left left = Math.floor((options.timestamp – (new Date())) / 1000);

  • Magritte

    Salut,
    Avant toutes choses merci pour cette article.
    Mais (parce qu’il y a toujours un mais) je n’arrive pas à changer les couleurs des languettes noir sous safari…
    Aurais-tu une solution

    • Magritte

      C’est bon j’ai trouvé, j’avais juste oublier de changer les couleurs sur deux ligne.
      Bonne soirée et merci encore

  • Schrem

    Bonjour,

    Tout d’abord merci pour ce compteur, il est vraiment bien fait !

    Ensuite vient la question… Comment faire si je veux que le compteur compte plus de 99 jours ? J’ai cherché à gauche à droite mais je n’ai rien trouvé !

    Merci et à bientôt

    • Schrem

      Avant de m’attirer les foudres d’autres lecteurs, j’ai bien évidemment lu les autres messages ! Le tout étant de savoir si une solution a été trouvée depuis ^^

  • Narellan

    Salut !!

    Comment l’intégrer dans un site wordpress ?? Mais plus particulièrement dans un slide ?

    • Il suffit d’inclure les fichiers de ressources JS et CSS ainsi que le code HTML où vous le souhaitez…

  • michel

    merci pour ce script ! j’aimerais passer la date de début du compte à rebours dans des variables php ( du genre $jour=10 , $heure = 13 etc … COMMENT JE FAIS ( j’ai essayé avec les commentaires ci-dessous, mais ça ne marche pas ). merci

  • Pingback: Acces 403 - L'inaccessible n'existe plus – Tuto créer un compteur en javascript avec jQuery()

  • xavier

    Super compteur !! Bravo !
    Est-il possible d’en faire un dynamique, ou la valeur de l’ID du DIV soit récupéré (en php) d’une BDD et de cette manière afficher plusieurs compte à rebours ??
    Merci !

    • Oui c’est tout à fait possible ! il suffit d’initialiser votre JS avec des valeurs PHP

  • jerome

    Bonjour, j’ai un problème sous IE8, tous marche sur Firefox sur IE, comme d’habitude, impossible, je ne vois que des petits carré gris…

  • Julien

    Bonjour,

    J’aimerez utiliser ce compte à rebour mais en utilisant une durée plutôt qu’une date. En effet, j’aimerai par exemple pouvoir l’activer pour 600 secondes. Y’a-t’il moyen de l’adapter ?

    Merci par avance

  • Thor Gogolin

    Salut ! Pour ceux qui auraient eu (comme moi) envie de mettre plus de 3 chiffres pour le nombre de jours, voici le code modifié (dans jquery.countdown.js):

    http://pastie.org/5436627

    (trouvé dans les commentaires de cet article http://tutorialzine.com/2011/12/countdown-jquery/ )

  • Bsr
    Merci pour le script. J’aimerais savoir s’il est possible de l’utiliser pour animer des nombres par exemple un numero de téléphone à 11 chiffre ou autres chiffres. genre le compteur est a 0 sur 11 chiffres et tout les chiffres s’animent pour en arriver au numero voulu comme un tirage au sort.

    Merci de m’aider.

    • Il n’a pas été conçu pour ça mais oui c’est possible en modifiant le code source JavaScript

      • Un petit coup de pouce serais cool de ta part.

  • Carole

    Merci beaucoup pour ce très beau script que je viens de découvrir et qui me convient presque.
    Et effet, j’aurais aimé avoir, comme dans le tout premier script, les mots jours, heures, minutes et secondes qui apparaissent en dessous des 2 chiffres concernés. J’ai trouvé que la modification devrait se faire dans la fonction init mais j’arrive pas à faire quelque chose de joli comme dans le premier script

    • startx25

      Hi carole, as tu trouvé une solution pour l’insertion de texte (jours heurs) en dessous du compteur ?

  • Thibaut Knop

    Quelle est la solution pour intégrer 2 comptes à rebours sur la même page? Après de multiple essai, mes 2 comptes à rebours partagent le même fichier css, et je n’arrive pas à forcer l’utilisation de 2 fichiers css différents.

  • Vincent

    Excellent système bravo ! Malheureusement ne fonctionne pas sur IE 🙁
    C’est dommage parce qu’il marche à merveille sur FireFox…
    Avez-vous une astuce pour que ça fonctionne sous IE ?
    Merci !!!

  • Me

    Hello,
    Merci pour ce script.
    Une question : j’ai beau initialisé la ligne  » var ts = new Date(2013, 0, 31); « , le compteur est par défaut à 10 jours … je ne comprends pas, comment puis-je initialiser un compte à rebours pour la fin d’année en dynamique, de telle sorte que quand l’utilisateur se connecte il a systèmatiquement le temps restant d’ici le 31 Décembre 00h?

    Merci d’avance pour votre aide

  • David Blanchet

    Bonjour! Super compteur et très pratique! Mais par contre j’ai un petit soucis, en fait il m’affiche la ligne: 2 jours, 3 heures, etc… Mais il n’y a rien sur le compteur lui même ! 🙁 Et je comprends pas d’ou pourrait venir le problème car j’ai simplement copié les fichiers! (avec les bonnes url pour les scripts bien sûr..) Si qqun a une idée d’ou pourrait provenir le problème, faites moi signe svp! Merci d’avance 🙂

  • Gildas Dehe

    Salut à tous. Nous sommes le 19 Février 2015. J’initialise la ligne « var ts = new Date(2015, 2, 22); » mais le compteur l’affiche 30:23:56:59. Quelqu’un a eu ce problème ?? Si oui comment l’a-t-il résolue ?

    • Djess159

      Salut ! Si ce n’est pas trop tard Je pense que sa viens du faite que le premier mois est le chiffre 0 dans la variable , tu doit initialisé (2015,1,22) pour un événement en février

      • Gildas Dehe

        Super, merci Djess159. Cependant, comment se fait la programmation de l’heure exacte de l’événement ?? Est ce sur cette ligne « ts = (new Date()).getTime() + 10*24*60*60*1000; » ??

        • Djess159

          La programmation de l’événement se fait sur celle-ci « var ts = new Date(2012, 2, 9); » tu rentre l’année en premier le mois puis le jour 🙂

Lire les articles précédents :
HTML5 rocks dévoile un guide pour construire une application Web

Mi février Google nous dévoilait une mise à jour de son service en ligne HTML5 Rocks. Ce site de ressources...

Fermer