Fermer
DéveloppementWeb

L’heure, un compte à rebours et un compteur à la façon Apple : HTML, CSS, JS

10 milliards de téléchargement pour iTunes
10 milliards de téléchargement pour iTunes

Il y 9 mois, Apple annonçait les dix milliards de musiques téléchargées sur iTunes. Au delà de ce chiffre incroyable, mais ce qui m’a intrigué c’est surtout la manière simple et soignée dont le compteur était réalisé. De plus il est étonnamment simple. Désormais Apple l’utilise pour chaque sortie d’un produit. (Snow Leopard, etc…)

Récemment, j’ai lu un tweet de Valentin Brandt présentant un article (en anglais) sur la réalisation d’un compteur à la façon Apple. J’ouvre une parenthèse pour remercier l’auteur de m’avoir donné son accord pour m’en inspirer. Nous allons donc voir dans cet article la manière de procéder pour : afficher l’heure, un compte à rebours mais aussi un compteur et tout ceci en reprenant le design de base du compteur Apple.

Commençons par analyser le compteur

Leur compte à rebours comporte un petit retournement comme les réveils anciens. Au début, je pensais que la réalisation était faite en Flash, mais connaissant Apple ce n’était pas possible. Après inspection, on découvre qu’il a été fait avec une seule image, un peu de JavaScript, et une habile utilisation de sprites CSS. Ils ont aussi une version plus petite sur leur page d’accueil pour annoncer le lancement de certain produit.

L’image mesure 6000 pixels de haut et comprend les différentes étapes de chaque numéro de zéro à neuf. Une étape est constituée du retournement d’un chiffre à l’autre, par l’intermédiaire de six états ; un seul étant considéré à la fois. Le JavaScript change alors la propriété CSS background à courts intervalles réguliers pour donner l’illusion de retournement des chiffres, semblable à l’effet d’un zootrope.

L’intelligence est dans la simplicité…

Description de l’article

Je vais vous donner un bref aperçu des mesures prises pour reproduire le compteur, mais pour ceux qui veulent aller droit au but, vous pouvez directement aller sur la page de démonstration. Le code source d’origine étant assez commenté, toute personne intéressée pourra voir la source et observer ce qui se passe pour le reproduire.

En revanche pour ceux qui souhaitent des instructions plus techniques n’hésitez pas à lire la suite de cet article.

Notions de base

En regardant l’image de près, on observe que chacune est de 103 pixels en hauteur. L’animation de chaque chiffre comporte cinq cadres, laissant ainsi 618 pixels d’espace entre eux. Ainsi le chiffre zéro aurait une position pour son background de 0 0, le un serait 0-608px, le deux serait 0-1236px, etc..

La solution pour animer le compteur est d’utiliser une liste ordonnée des chiffres et de se servir du Javascript, par l’intermédiaire de jQuery, pour animer la position d’arrière-plan de chaque élément de la liste.

Nous allons prendre l’exemple de l’affichage d’un compteur affichant 10 milliards.

Affichage du compteur 10 milliards à la façon Apple

La structure HTML

[sourcecode language= »html »]
<ul>
<li id="d9"></li>
<li class="seperator"></li>
<li id="d8"></li>
<li id="d7"></li>
<li id="d6"></li>
<li class="seperator"></li>
<li id="d5"></li>
<li id="d4"></li>
<li id="d3"></li>
<li class="seperator"></li>
<li id="d2"></li>
<li id="d1"></li>
<li id="d0"></li>
</ul>
[/sourcecode]

Le code HTML est très simple : il s’agit d’une liste comportant des éléments (dix), chacun identifié par un id et représentant dix chiffres et trois autres éléments ayant une classe separator servant à afficher les virgules de séparation.

Les styles CSS

[sourcecode language= »css »]
ul {
list-style-type:none;
width:566px;
margin:50px auto;
}
li {
float:left;
background:url(filmstrip.png) 0 0 no-repeat;
width:53px;
height:103px;
}
li.seperator {
background:url(comma.png) 2px 75px no-repeat;
width:12px;
}
[/sourcecode]

Le code CSS ci-dessus permet de définir le style et les éléments de la liste. L’élément pour les chiffres est caractérisé par l’application du background:url(filmstrip.png) 0 0 no-repeat; et l’élément séparateur par : background:url(comma.png) 2px 75px no-repeat; (l’image étant la virgule).

Affichage du compteur à la façon Apple

Le JavaScript jQuery

Il a fallu peu de temps pour obtenir un fonctionnement simple du compteur. Mais la partie la plus complexe est le déclenchement d’une animation de cinq trames pour que chaque chiffre soit modifié. Pour simuler la fonctionnalité du compteur du site d’Apple, il faut le voir comme si c’était un comptage à une augmentation très rapide, avec des vitesses d’animation variables selon les chiffres.

Après incrémentation de la valeur, la première étape est d’observer quel est le prochain chiffre à être animé :

[sourcecode language= »javascript »]
function digitCheck(x,y) {
var digitsOld = splitToArray(x),
digitsNew = splitToArray(y);
for (var i = 0, c = digitsNew.length; i < c; i++){
if (digitsNew[i] != digitsOld[i]){
animateDigit(i, digitsOld[i], digitsNew[i]);
}
}
}
[/sourcecode]

La méthode prend en entrée, les paramètres x (incrément de la valeur avant) et y (incrément de la valeur après), et les transmet à une autre fonction, appelée splitToArray, permettant de découper chaque valeur dans un tableau de chiffres individuels. Elle compare ensuite chaque chiffre, et s’il y a un changement, passe l’information à la méthode animateDigit.

Cette dernière est la partie la plus difficile, car la fonction animateDigit permet de faire des animations pour chaque chiffre correctement indexé. Dans la boucle qui contrôle l’animation, il est nécessaire de modifier la position d’arrière-plan (background) à cinq reprises avec un délai précis. Pour cela nous allons utiliser la fonction setTimeout directement native de Javascript qui va nous permettre de déclencher une minuterie et appeler la méthode doAnimate. La déclaration est la suivante :

[sourcecode language= »javascript »]
setTimeout(doAnimate, timeOut, n, pos);
[/sourcecode]

Cette méthode fonctionne très bien dans les navigateurs Google Chrome et Firefox mais malheureusement pas sous IE… En effet, on ne peut pas passer des paramètres à la fonction setTimeout, on est donc obligé de passer par une fonction de fermeture (closure) :

[sourcecode language= »javascript »]
setTimeout(fonction(){doAnimate(n,pos)}, timeOut);
[/sourcecode]

Mais il y a encore un problème … l’animation n’est pas régulière avec tous les navigateurs. Après une bonne nuit, Chris Nanney a pensé à utiliser jQuery grâce à une nouvelle méthode de temporisation qui a été ajoutée dans la version 1.4.

[sourcecode language= »javascript »]
$("#d" + n).delay(speed).animate({‘background-position’: ‘0 ‘ + pos + ‘px’}, 0);
[/sourcecode]

Depuis la mise en place de jQuery il n’y a plus de problème entre les différents navigateurs.

Personnalisation

Pour cet article, j’ai choisi d’utiliser les mêmes images que Chris Nanney (je me suis permis de modifier les couleurs).

Personnalisation du compteur à la façon Apple
Personnalisation du compteur à la façon Apple

La personnalisation de vos propres images est très facile. Tout ce dont vous avez besoin c’est un espacement constant entre vos images, et d’être en mesure d’en ajouter. Vous pouvez ainsi modifier la taille des chiffres ainsi que le design.

Dans le code source la personnalisation se trouve au début du code JavaScript :

[sourcecode language= »javascript »]
// Tableau pour stocker la valeur Y du background-position Y de chaque chiffre
var initialPos = [0, -480, -960, -1440, -1920, -2400, -2880, -3360, -3840, -4320];
// Nombres de cadres d’animation
var animationFrames = 5;
// Hauteur du cadre
var frameshift = 80;
[/sourcecode]
  • Le tableau initialPos contient la valeur Y du départ de chaque chiffre, par incréments de 480 pixels (80px par trame x 6 images par chiffre)
  • animationFrames décrit qu’il y a 5 images d’animation entre les chiffres
  • frameshift Hauteur du cadre

Ce sont les seuls changements nécessaires pour faire fonctionner correctement le compteur (en dehors de la mise à jour de la CSS), et de retravailler les animations supplémentaires dans la fonction animateDigit.

Voilà j’espère que cet article vous plaira. Si vous avez des questions, des commentaires ou des suggestions, n’hésitez pas à laisser un commentaire, j’y répondrais.

[samples id= »1126″]

Source et merci à @geekeriesfr

Un compte à rebours entièrement personnalisable

Suite à différents commentaires sur cet article, je vous propose un nouvel article qui va vous permettre de réaliser un compteur entièrement personnalisable. En effet, sur ce dernier, vous pourrez vous-même définir la couleur du compteur, la taille, etc… L’adresse de ce dernier est celle-ci : http://www.blog-nouvelles-technologies.fr/10704/un-compte-a-rebours-entierement-en-jquery-et-css/

Mots-clé : Applecompteurcountercsshtmljavascriptsamples
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é.
  • Very cool, good job.

  • Thanks !

  • Pingback: Réaliser un Splach screen à la façon Apple : HTML, CSS, JS | Le blog des nouvelles technologies : Web, Technologies, Développement, Interopérabilité()

  • Ricco

    Y-a-t-il moyen d’avoir ces sprites, je ne les ai pas trouvé ?

  • Ricco

    je suis aveugle, désolé 🙂

  • Bon. Bigrement impressionnant ce compteur à rebours. Merci infiniment.

    Une question, comment réduire la taille des chiffres qui défilent, et obtenir la dcouleur de fond grise ou bordeaus comme dans les exemples ci-dessus.

    Encore merci professeur Yohann

  • La taille des chiffres est en fonction de l’image ou des images. Dans votre cas il s’agit des fichiers « filmstrip_countdown_2-0.png », « filmstrip_countdown_5-0.png » et « filmstrip_countdown_9-0.png ». Il est nécessaire de les refaire pour changer la couleur mais aussi la taille.

    Je peux vous envoyer ces 3 images en gris par mail si vous le souhaitez ? En revanche pour le fond gris il faut les refaire et cela du travail…

    Merci à vous.

    • Merci Yohann, si vous pouvez m’envoyer les 3 images en gris, je vais essayer cela.

      Et s’il faut les refaire sur mesure, n’hésitez pas à me faire votre devis.

      Cordialement, et encore bravo pour votre rapidité.

      K

      • Je viens de vous transmettre les images.

        Pour les faire sur mesure cela risque d’être compliqué par un manque de temps… Vous vouliez qu’elles soient de quelles tailles ?

        • Merci j’ai bien reçu les images grises.

          Les images pourraient-elles être moitié moins grandes ?

          Mais ne vous pressez pas, quand vous aurez un moment, prévenez-moi, et en attendant passez de bonnes fêtes de fin d’année.

          Encore merci

          K

        • Bonjour Yohann,

          j’ai réussi à changer les couleurs de fond des chiffres.

          Il me reste à traites leur taille et la v-couleur de fond qui est blanche actuellement.

          A bientôt et bon Noël

          K

  • tom-over

    Salut,
    génial ce compteur !
    par contre j’ai essayé de redimensionner les images pour avoir des éléments de width:21px sur height:42px
    je dois avoir un problème car les chiffres (seconde)bouge vers le haut… lol

    pourrais-tu m’aider à paramétrer la page ?
    merci

  • Donne moi ton lien je vais regarder. En revanche, le redimensionnement que tu as fais, as-tu répercuté les valeurs dans le fichier Javascript ?

    Je pense que je vais créer un nouvel article en réalisant le même compteur mais sans les images, qu’en CSS…

  • Quand ca arrive à 0, le compteur repart à 91 jours, c’est normal ?

  • koops

    Salut Yohann,
    géniale le compteur à rebours, mais j’aurais une question serait il possible de le transformer en compteur visite par hit?? merci.

    • Yes bien sûr ! Je rajoute une démo en ligne pour ce soir.

    • Voilà les fichiers ont été mis à jour ainsi que la démonstration. Le fichier Javascript prends en paramètre le nombre passé en argument.
      J’attends votre retour.

      • koops

        salut je vient de télécharger le fichier mais le compteur ne s’affiche pas ?? merci.

        • Pourrais tu donner ta page d’exemple pour que je puisse regarder ?

          • koops

            je n’es rien héberger jusqu’à maintenant je travail on off-line le truc ces que tous les autres marche sauf le dernier qui ne s’affiche pas dans le fichier simple. merci a toi

  • Effectivement il y avait un petit problème avec le fichier, vous pouvez de nouveau télécharger l’archive.

  • Bonjour Yohann.

    Je trouve votre compteur excellent. Bravo et merci !

    PS : comment mettre en oeuvre un compteur de type countdown-pad avec uniquement 9 digits par exemple (au lieu des 11 dans l’exemple ?)

    • Bonjour,

      Merci ! Il suffit tout simplement de modifier l’élément suivant var size = 11; dans le fichier JS countdown-pad (ligne 125).

      Cordialement,

  • Nickel, ca marche Nickel.

    Merci Yohann

  • marc

    Bonjour,

    Comment intégrer cela dans wordpress…?

    Merci

    • Bonjour Marc,

      A quel endroit voulez-vous l’insérer ?

  • marc

    Bonsoir,

    Tout d’abord merci pour votre réponse rapide.

    Au sein d’une page ou d’un widget si possible.

    Courtoisement

    • Il suffit de récupérer le JS, le code HTML et la CSS et l’incorporer dans votre page WordPress. Ou bloquez-vous ?

      • marc

        Donc si je comprends bien…

        Je met le JS et le css par exemple dans la racine du site. Je copie l’HTML au sein de la page…

        Et ça fonctionne?

        Merci

        • Logiquement aucun problème 😉 Je reste à votre disposition.

          • marc

            Je teste ça de suite… Merci beaucoup…!

        • marc

          Logiquement ça doit marcher… Le problème c’est ma logique.

          Bon j’ai mis le JS dans la racine du site. Le HTML dans l’article… Mais le CSS ou le placer?

          Mais même comme ça j’doute un peu que ça marche. En fait j’ai copier coller le HTML plus haut dans votre article. Je dois faire fausse route.

          Dsl j’suis débutant.

          Merci par avance pour votre réponse

  • Alors procédez comme suit :

    • Récupérer l’archive contenant les fichiers sur le site
    • Incorporer le fichier Javascript correspondant au compteur que vous souhaitez intégrer dans le fichier header de WordPress.
    • Copier toujours dans le même fichier le CSS en utilisant les balises suivantes : <style type="text/css">... la CSS selon votre compteur ...<style>
    • Incorporer le code HTML suivant votre compteur dans une des pages WordPress
    • marc

      MERCI! CA MARCHE NICKEL!

      Rare d’avoir une aide comme la votre et aussi rapide!

  • Arnold

    Bonjour, d’abord BRAVOOO !!!

    Pour le compteur de visites , comment faire pour que cela soit animé en temps réel ? c’est à dire du même style d’animation que les autres conteurs ?

    Bien à vous.
    Arnold

  • Arnold

    Re-bonjour,

    2ième question:
    Pour le compteur animé croissant, est- il possible de faire en sorte qu’il ne se réinitialise pas à la valeur de départ quand on rafraichi la page ?

    Merci

  • Bonjour,

    Pour vous répondre très simplement il faut utiliser la technologie AJAX qui vous permet de récupérer des valeurs dans la base de données, etc … Ainsi très simplement vous pouvez rafraichir le contenu de votre compteur !

    Pour votre deuxième question, vous devez tout simplement initialiser votre compteur avec une valeur récupéré soit depuis votre base de données, ou fichier …

    Yohann,

  • Arnold

    Bonjour Yohann,

    Grand merci pour tes réponses. Je me doutais bien qu’il me fallait un codage en Ajax pour parfaire mon compteur. Je saurais faire cela mais il me faudrait voir si quelqu’un n’a pas déjà faire un code similaire sur le web pour gagner du temps.

    Merci pour ta réponse rapide.
    ps: ton site est trop bien fait.

  • Arnold

    Bonjour Yohann,

    C’est plus dur à faire que je ne pensais… j’a

  • Bonjour,

    Je pense qu’il y a eu une erreur dans votre précédent commentaire… Sur quelle partie bloquez-vous ?

    Yohann,

  • Arnold

    Bonjour Yohann,

    Que penses tu du code ci-dessous :

    http://stackoverflow.com/questions/4848994/modify-cnanney-apple-flip-counter-to-pick-value-from-joomla-user-database/4921579#4921579

    C’est un peu ce que je recherche mais j’ai du mal à l’implémenter ou comprendre. Est-ton forcé d’utiliser Joomla pour avoir le même résultat ? Aussi, il ne parle à aucun moment d’un exemple de connexion sur la base de donnée. C’est à dire par exemple :

    $nbrUser = $dbconn->Execute(« select count(*) from « .USERS_TABLE. » where root_user !=’1′ and guest_user !=’1′ »);
    $totalUser = $nbrUser->fields[0];

  • Alors pour exécuter le même code que lui effectivement il faut avoir Joomla… Pour répondre à ta question je te confirme qu’une simple connexion MySQL fonctionne.
    Je vais faire un tuto dans la semaine si cela t »intéresse…

  • Arnold

    Re-bonjour,

    Merci beaucoup pour ta réponse ULTRA Rapide !! Si tu veux faire un tuto, prends en compte le commentaire de Chris Nanney sur son site :

    Chris Nanney 3 months ago in reply to Cbranch

    Real-time updating would be very complicated, but you could achieve the same thing with polling. Just set an interval on an AJAX request to a script on your server that returns the number of records. However, this style of animation works best with a linear progression of numbers, not jumping around.

    For example, if the number of records at page load is 3, then you poll two seconds later and it’s 7, there is no way to smoothly animate from the 3 to the 7. The 3 will animate to a 4, then abruptly jump to 7 at the end of the animation.

    In this situation, if I were going to use this type of counter for such a purpose, I would use longer poll intervals and use an average rate rather than exact number so the animation could be smooth. Maybe poll every 10 seconds, find the difference in # of records, and animate the difference over those ten seconds. So if it goes from 3 to 7, then animate from 3-4-5-6-7 over the following ten seconds. This could get complicated depending on the varying rate of increase, and calculating delay timings and animation speeds, etc.

  • Oui je sais on en avait parlé ensemble ! Concernant l’article de cette semaine ce sera plus générale sur la connexion de PHP avec une base données.

    Pour un tuto d’un compteur de site je m’en occupe au plus vite.

  • Arnold

    Grand merci !!!

    Bonne après-midi.

  • Arnold

    Bonjour Yohann,

    j’ai discuté avec Chris Nanney hier et voici ce qu’il pense du script sur joomla :

    **********************************************
    Chris Nanney 10 hours ago in reply to Arnold

    It’s sad to see my code turned into such an incoherent rambling mess on stackoverflow. This code is a simple client-side counter implementation. It’s just JavaScript. It’s not Joomla-specific, I’ve never used Joomla in my life. The question seems to be how to get a starting number from the server side to the client side to use the counter.

    Just query the DB and input the number directly to the script server side, or wait and fetch it remotely on the client side.
    Flag

  • stephane

    Bonjour

    merci pour ce superbe compteur/tutoriel.
    je n’arrive pas à modifier la date de décompte (date anniversaire du blog). Je ne trouve pas la variable qu’il faut modifier.
    merci d’avance pour l’aide

    • Bonjour,

      Il vous suffit de modifier la valeur dans le fichier javascript coutdown.js de la variable target : var target = 'June 12, 2011';

      Voilà,

  • stephane

    j’ai testé et ça ne fonctionne pas…

    if (endCountdown < nowCountdown){
    target = 'May 12, 2011';
    endCountdown = Date.parse(target);

  • stephane

    non, tout fonctionne bien…

    • Quel est le problème exactement ? Aucun affichage ? Auriez-vous un lien pour visualiser le résultat ?

  • stephane

    désolé je n’ai pas de lien… le résultat est très simple : l’affichage et le même quelque soit la valeur jour, mois, année

    • Avez-vous bien rafraichi votre cache ? (CTRL+F5 sous Windows et Pomme+R sous MacOSX)

      Attention il y a deux endroits pour modifier la date :

      // Ligne 4
      // SET TARGET DATE HERE
      var target = 'June 12, 2011';
      // Ligne 29
      target = 'June 12, 2011';

  • stephane

    Amen ! je n’avais pas vu la ligne 4… MERCI !

  • stephane

    wouw… l’adaptation graphique (taille) n’est pas hyper simple…

    • Oui je sais… j’envisage de faire une version entièrement en HTML + CSS + JS 😉

  • stephane

    Alors mon image redimensionnée fait 42 px – je dois donc modifier les ligne de code dans le js ce qui donne ceci :

    // Initial digit position for each number graphic
    // 9-0
    var initialPosCountdown = [-2198, -1956, -1714, -1472, -1230, -988, -746, -504, -252, 0];
    // 5-0 (first minute and second digit)
    var initialMidPosCountdown = [-1230, -988, -746, -504, -252, 0];
    // 2-0 (first hour digit)
    var initialSmallPosCountdown = [-504, -252, 0];

    au final ça ne donne un affichage décalé… j’ai dû rater une étape…

    • Avez-vous modifié la frameshift correspondant à la hauteur du cadre ?

      • stephane

        oui j’ai intégré la valeur « 42 » à la place de 103

        • Je vous propose d’attendre la nouvelle version de ce compteur qui sera essentiellement en Javascript CSS et HTML.

  • Halicar

    Bonjour,
    J’ai réussi a mettre en ligne le 2eme compteur de la démo, le compte a rebours bleu, mais je voudrais y ajouter les millisecondes, comment faire ?
    Par avance, merci 😉

    • Bonjour,

      Pour cela il est nécessaire de rajouter dans la div id="countdown-blog" une nouvelle div et un ul pour afficher les millisecondes.

      Ensuite dans le fichier JS modifier les valeurs classNamesCountdown, idNamesCountdown. Dans la fonction getTimeStringCountdown ajouter les millisecondes.

      Voilà j’espère vous avoir aiguillé.

      • Halicar

        Merci pour la réponse, j’ai essayé mais sans succès, je suis un amateur, non professionnel et j’ai du faire des erreur quelque part, dans les valeur classNamesCountdown et idNamesCountdown j’ai ajouter les milliseconde et une petite lettre, mais dans la div id= »countdown-blog » j’ai pas du ajouté le bon truk, j’ai regardé par raport a ce qu’il y a deja mais je ne sais pas trop comment le redigé.
        De plus dans getTimeStringCountdown comment rajouté les millisecondes?
        J’ai ajouté deux ligne celle commençant par var milliseconde et diff mais plus rien ne s’affichait.
        Si vous avez plus de temps pour m’éclairer unpeu plus je suis preneur, sinon tan-pi, merci quand même pour toute ces info et ce compteur!

        • Bonjour,
          Je vais rajouter les millisecondes dans la démo pour la fin de semaine 😉
          A+

  • Kwent

    Aurais tu les filmstrips sans contour blanc? Avec tout en transparence? Car sur des pages avec une color de fond unie, cela ne colle pas parfaitement.
    J’ai commencé le détourage sous photoshop mais c’est trop fastidieux et pas trés propre.

    Merci à toi 🙂

    • Bonjour,
      Non je n’ai que ceux-ci, en revanche je vais faire un nouvel article pour un compteur 100% HTML / CSS et JS 😉
      Encore un tout peu d’attente 😉

  • Halicar

    Déja un grand merci si tu as le temps de rajouté les millisecondes au compte a rebours.

    • Halicar

      Et j’ai une autre petite question, pour le compte a rebours j’ai la date:
      var target = ‘July 13, 2011’;
      Mais je voudrais que ce soit le 13 juillet a 20h ! j’ai ajouté 20:00 mais c’était pas bon, Comment dois-je l’écrire ?
      Merci

      • Je vais tout mettre dedans 😉

        • Halicar

          Ah ce serait extra 🙂

          • Désolé, je n’ai pas eu le temps ce weekend je m’en occupe au plus vite…

  • chalwa

    Bonjour,

    je n’arrive pas a mettre plusieurs compteurs sur la même page.

    • Comment procédez-vous ? Comme avec l’exemple fournit ?

  • J’ai regardé le strip, et il a un petit bug. Quand le chiffre commence à tourner (plus précément sur le 2ème strip du chiffre) c’est le chiffre lui-même que l’on voit sous ce chiffre.

    Par exemple, en position -206px, on voit un bout de 0, alors que ça devrait être un bout de 1 puisque c’est le zéro qui tourne.

    Avec l’animation, on ne voit pas trop ce bug.

  • Daniel

    Bonjour,
    Bravo pour le tuto c’est vraiment cool et utile.

    Le seul petit souci que j’ai ai que j’aimerai mettre le compte à rebours du deuxième exemple en noir et non en bleu mais il me semble que ce n’est pas possible au vue des fichiers disponibles sur le RAR?

    • Avez-vous une adresse mail sur laquelle je peux vous envoyer les fichiers ?

  • FranZz

    Photoshop>Image>Mode>Niveaux de gris

  • Emilien

    Salut vraiment cool ton tuto. Mais j’aimerais l’utiliser sur un fond de couleur (donc mettre les png en transparence et sans l’effet reflet). J’ai essayé sur filmstrip.png mais ca n’est pas propre il me reste du blanc dans les gris. Serait-il possible d’avoir le psd original?

    Merci, bonne continuation

    • Malheureusement je n’ai pas le PSD mais tu peux le faire comme le dit FranZz d’utiliser dans Photoshop ceci : Image > Mode > Niveaux de gris

  • David

    Salut,

    Très bon boulot, exactement ce que je cherchais.

    Je voulais savoir comment il me serait possible d’en faire un plugin , par exemple comme ceci :

    jQuery.fn.countdown = function(userOptions)
    {
    var Options
    {
    /************************************************************************/
    // Initial digit position for each number graphic
    // 9-0
    initialPosCountdown = [-5562, -4944, -4326, -3708, -3090, -2472, -1854, -1236, -618, 0];
    // 5-0 (first minute and second digit)
    initialMidPosCountdown = [-3090, -2472, -1854, -1236, -618, 0];
    // 2-0 (first hour digit)
    initialSmallPosCountdown = [-1236, -618, 0];
    classNamesCountdown = [‘days’, ‘hours’, ‘minutes’, ‘seconds’];
    idNamesCountdown = [‘d’, ‘h’, ‘m’, ‘s’];
    animationFramesCountdown = 5;
    frameShiftCountdown = 103;
    target = ‘June 03, 2011′;
    };
    };

    afin de pouvoir avoir les options par défaut et que celle-ci puisse être modifiées en faisant un appel depuis le code html de la façon suivante par exemple:

    $(function(){
    $’#countdown-blog’).countdown({
    target = ‘June 03, 2011’;
    });
    });

    Merci d’avance.

    • Bonsoir,

      Je vais voir ça au plus vite, et je reviens vers vous !

      • David

        Merci pour finir, j’ai trouvé comment faire pour pouvoir utiliser les paramètres dans le htlm directement mais ce qui m’intéresserait réellement serait de pouvoir définir une heure plutôt qu’une date.

        merci d’avance.

        • David

          Un grand merci. J’ai compris comment modifier dans le javascript afin de pouvoir utiliser une heure plutôt qu’une date.

          • Même pas eu le temps de répondre 🙂 N’hésitez pas à nous montrer le résultat !

  • David

    Bon apparemment, je n’arrive pas à poster mon code afin de montrer les modifs effectuées.

    • Je vous propose de m’envoyer le fichier ZIP du plugin je l’ajouterais en fin d’article.

      Un petit tuto de qq lignes pour l’utiliser sera parfait 🙂

      Merci d’avance,

      • David

        Ok, je ferais cela ce soir.
        Par contre quand le compteur arrive à zéro, celui-ci ne s’arrête pas mais reprend avec 22h de plus.

        • Oui tout à fait ! Il vous suffit de modifier le fichier HTML et plus précisément les éléments <h2>DAYS</h2>

  • David

    Salut,

    Je n’ai pas trouvé ton adresse email afin de pouvoir t’envoyer les modif effectuées sur les deux fichiers pour faire un compte à rebours entre une heure de départ et une de fin du même jour.

    Pourrais-tu m’envoyer ton adresse par mail ?

    Merci.

    PS : Je n’ai pas encore trouvé comme faire pour que une fois que le compte à rebours est à zéro, que celui-ci de redémarre pas avec 22h00 de différence mais s’arrête bel et bien et ne redémarre que le lendemain à partir de l’heure de départ.

    • Mon adresse c’est contact (at) blog-nouvelles-technologies (dot) fr.

      Concernant l’arrêt du compteur je regarde ça… (désolé je suis un peu pris en ce moment j’organise l’anniversaire du blog dans une semaine…)

  • Aubin

    Bonjour, merci beaucoup pour ce pluging,
    un petit soucis toute fois, il fonctionne mal avec la version jquery-1.5.2

    Le pb est qu’on ne voit plus l’animation de changement de chiffres

    Merci d’avance

  • kornfr

    Bonjour,

    Concernant le compte à rebours, est il possible de le mettre en Français ?

    days : jours, etc etc ?

    Merci

    • Pokerface77

      Bonjour,

      Je n’ai pas vu de réponse à cette question, concernant la traduction en français, est-ce possible ?

    • Anonyme

      Bonjour

      Oui il est possible de le mettre en Français il suffit de modifier la source HTML.

      • Pokerface77

        le fichier est en PHP, je ne trouve pas la référence en HTML

      • Pokerface77

        le fichier est en PHP, je ne trouve pas la référence en HTML

      • Pokerface77

        le fichier est en PHP, je ne trouve pas la référence en HTML

      • Pokerface77

        le fichier est en PHP, je ne trouve pas la référence en HTML

  • david

    Bonjour,

    Super tutoriel, je cherchais un compteur comme celui depuis longtemps.

    J’ai bien vu les commenatires pour changer la couleur de fond : Photoshop ceci : Image > Mode > Niveaux de gris mais je n’y arrive pas, quelq’un peut -il nous expliquer un peu plus dans le détail comment il faut faire.

    Merci

  • kornfr

    Bonjour
    Est il possible de preciser en plus de la date, l’heure de fin ;

    06 Juillet 2011 à 14h05

    Merci

  • Bonjour,

    Je ne pige strictement rien au tutoriel.
    Je n’ai aucune idée d’où insérer chaque code décrit ici.

    Si quelqu’un peu m’éclairer.

  • Péralba

    Bonjour,
    d’abord mille mercis pour ce superbe compteur !
    J’utilise le compte à rebours (countdown.js), mais à la place d’une deuxième date lorsque on arrive à la fin du compte, j’aimerais simplement arrêter le compteur à zero (ou afficher une image si c’est plus simple) … J’imagine que la modif se fait sur le .js au de l’extrait de code ci dessous; j’ai besoin de votre aide ! 😉
    Merci

    // Starting numbers
    var nowCountdown = new Date().getTime();
    var endCountdown = Date.parse(target);
    // Fix if date is in past
    if (endCountdown < nowCountdown){
    target = 'july 09, 2011, 16:30';
    endCountdown = Date.parse(target);
    }
    var theDiffCountdown = endCountdown-nowCountdown;
    var theDiffStringCountdown = getTimeStringCountdown(theDiffCountdown);

    • Bonjour,

      Il vous suffit de rajouter dans le code ci-dessus :

      if (endCountdown == nowCountdown) { votreaction }

      • Sami

        Bonjour, pouvez vous m’expliquer comment effectivement stopper le compteur a zéro lorsque la date de fin est arrivée ?
        Actuellement lorsque la date cible est atteinte, le compteur recommence et part pour 9000 jours et des poussières…
        Par exemple pour tester j’ai mis le target au jour d’aujourd’hui et le compteur est a 9172 jours et des poussières.
        Merci

  • Bonjour,

    Super ce compteur!

    J’ai une question pour le compteur à partir de 0. Comment lui appliquer une limite? Genre arrivé à 17500 le compteur s’arrête.

    • Il suffit de placer un test dans la boucle de défilement

  • Tom

    Bonjour,
    Ce compteur est juste magnifique !! Vraiment.
    Si je souhaite l’installer à mon site WordPress, comment dois-je faire ?
    Merci d’avance.
    Bonne Journée !!

    • Bonjour Tom, tu as juste a récupérer les sources et l’insérer ou tu veux dans ton thème 😉

      • Tom

        C’est à dire ? Si par exemple je souhaite insérer le compte avec les widgets ? Je dois coller quel code ?

        • Je te propose de lire quelques commentaires avant un lecteur a fournit un plugin 😉

          • Tom

            D’accord, je regarde ça de suite ! Merci beaucoup !

          • Tom

            Désolé de vous déranger une nouvelle fois. J’ai lu tous les commentaires, ils parlent bien d’un plugin mais je ne vois aucun plugin disponible…
            Je m’excuse du dérangement .. Il faut aussi dire que ce compte à rebours est somptueux.. 🙂

          • Je vous transmets par mail le mail de l’auteur du plugin

  • serge

    bonjour

    j’ai un petit soucis avec le compte à rebours en fait il ne fonctionne plus lorsque la page a des parametres par ex
    http://www.cv-developpeur-web2.com/samples/1126/?toto=10

    je ne vois pâs d’ou peut venir ce pb?
    si quelqu’un a une idée

    merci d’avance

    • Anonyme

      Bien vu Serge ! Je sais d’où le problème vient… je m’en occupe !

  • kob

    Bonjour,

    Je souhaiterais ajouter deux voire trois compteurs initialisés à une date différente. Pour ce faire j’ai dupliqué la partie « countdown-blog » en changeant l’id en « countdown-blog2 » et idem pour le js en « countdown-2.js ». Le premier fonctionne mais pas le deuxième. Une idée ?

    • Attention il faut modifier toutes les variables globales dans chacun des fichiers. De plus vous devez définir différents « id » pour vos éléments…

      • kob

        Oui je me doute que c’est un peu barbare comme méthode :P. Il n’y a pas une méthode plus simple pour utiliser plusieurs fois le même compteur sur la même page ? En utilisant les options de countdown.js par exemple ?

        • Malheureusement il n’existe pas d’objet Coutdown à proprement parlé… ce serait peut-être l’occasion dans faire un… je vais y réfléchir 😉

          • Jonathan

            Ohh oui ! j’ai exactement le même problème, plusieurs compteur à mettre sur la page mais je ne comprends pas ce que l’on doit modifier pour que chacun fonctionne indépendamment…

  • Scoub

    Bravo pour ce très beau travail et votre patience !!

  • LJ01

    bonjour
    dans un module j’ai mis la partie Html dans mon fichier php et css dans mon fichier css
    l’affichage se fait normalement
    mais je ne comprends ou et comment mettre la fonction Js, voici le module en question http://batenergie.free.fr/
    je souhaite voir le résultats du calcul s’afficher dans le compteur en se déroulant de zéro à résultat ..
    merci LJ

    • Vous avez juste à reprendre le fichier JS fournit dans la démo et l’inclure dans votre page.

      • LJ01

        merci
        j’ai ceci dans mon php
        $result.=’
        ‘;

        echo  »

        gCo2/km
        « ;

        et j’ai mis le fichier countdown_pad.js dans le même répertoire …

        mais rien ne se passe … j’ai du manqué une étape …
        merci LJ

        • LJ

          désolé pour la lourdeur du gars … mais je n’arrive toujours pas à faire marcher le compteur dans mon module
          LJ

          • Je ne vois pas le compteur sur le lien fournit. Avez-vous des erreurs Javascript, inclus la librairie jQuery, … ?

          • LJ

            dans le module Travel Co2 ..

          • Vous avez pleins d’erreurs JS (cf. pièce jointe) normal que le compteur ne s’initialise pas… vous devez les corriger pour que le compteur puisse marcher

          • LJ

            j’ai dépublier le mediabox, mais pour le reste je ne sais comment faire …
            hésite pas à me déconnecter si pas dans le sujet du forum contact courriel possible
            LJ

          • Je ne peux vous aider plus je ne connais pas ce CMS. désolé !

          • LJ

            ok merci

  • Julien MULLER

    Bonjour,
    avez vous trouver la solution pour corriger le problème lorsqu’on passe un paramètre à la page ?
    Merci d’avance.

    • Bonjour,

      Non pas encore eu le temps… je reviens vers vous au plus vite !

  • Julien MULLER

    Bonjour,
    avez vous trouver la solution pour corriger le problème lorsqu’on passe un paramètre à la page ?
    Merci d’avance.

  • Michel

    Bonjour Yohann, je réalise actuellement un site et je souhaite inclure le compteur non pas de visite mais de nombres d’inscrits dans celui ci à la manière du site Badoo.com (page d’accueil), Par rapport au site d’apple qui indique le nombre de téléchargement, peut on faire pareil avec la liste des inscrits d’une mailing liste en .
    J’utilise… joomla pour la création du site et le composant Acymailing, pour la gestion des abonnés.

    merci pour votre réponse et me tient à votre disposition pour toute information complémentaire.

    Lien de mon site : lavachealait.com

    • Il suffit de l’incrémenter en utilisant par exemple la technologie AJAX !

      • Michel

        Aie,
        Bonjour Yohann, merci pour ta réponse, j’avais deja du mal avec du html simple, alors la en ajax….. a part faire les vitres, je pense que je vais avoir quelques soucis….
        Par contre j’ai téléchargé un module sous joomla qui propose ce type d’affichage, mais les fonctionnalités sont rudimentaires, dommage car je pense que quelques fonctionnalités supplémentaires seraient les bienvenues…. (nom du module : mod_spcounters.zip)

        Si ttu as une info la dessus je suis preneur

        Salutations

  • Mr Casimir

    Un article très intéressent et utile. Merci bcp

  • Désolé je connais pas du tout Joomla (enfin de nom), mais pas du tout le module…

  • Sinet

    Bonjour,

    Merci pour ce compteur

    J’utilise le countdown et j’aimerai qu’une fois le décompte terminé il reste bloqué avec que des 0 pendant 48h puis qu’il reparte pour un décompte de 5 jours. ex : le décompte commence le vendredi à 17h pour s’arrêter le mercredi à 17h s’en suit un arrêt de 48h et repart le vendredi à 17h.

    Merci pour votre aide.

    • Bonjour,

      Ce comportement est plus complexe car il est nécessaire de « sauvegardé » la date d’arrêt… un système peut-être de la stocker en BDD et à chaque appel de la page vérifier si on est <= 48heures…

  • Lguytoux

    Bonjour Yohan et tout d’abord bravo pour ce boulot.

    En ce qui me concerne j’aimerais mettre l’heure de fin (en plus de la date) dans compte a rebours.
    Mais je ne sais pas du tout comment faire et je n’ai pas trouvé la réponse dans les commentaires précédents.

    Pourriez-vous m’aider car mes connaissances sont limitées dans ce domaine.

    Merci.

  • Bonjour,

    Pour cela il suffit de modifier le code Javascript et aussi rajouter dans le template HTML les deux éléments permettant de gérer l’heure.

  • Sam

    Bonjour,
    Je souhaiterais intégrer ce compteur à mon site (Countdown au 23 juin 2012)
    Je ne sais pas ou et comment intégrer ces codes sur mon logiciel webaccapella.
    Pourriez-vous m’aider?

    • Malheureusement je ne peux vous dire où insérer exactement le code ne connaissant pas le logiciel…

      • Sam

        En fait pour faire simple, je sais ou mettre le code  sur mon logiciel. Ma question est comment le mettre: Je colle le HTML, CSS, JQUERY à la suite et je place les fichiers téléchargés telquel sur le même répertoire que ma page?

  • Denheil

    Bonjour,

    Bravo pour ces démos.
    Est il possible de lier l’affichage au résultat d’une requête ?
    idéalement un refresh auto… j’en demande trop 😉

  • salut

    Bonjour

    merci c’est très joli;

    Pour le compteur de visite, le compteur est aléatoire que doit on changer dans le code pour que cela fasse vraiment selon les gens qui vienne sur le site 

    ensuite si on veux changer l fond de couleur de la page j’applique un style css mais ça ne fonctionne pas.. c’est normal?

  • Oui c’est possible

  • Balishi17

    merci c’est sripte trés utile
    mais je n’arrive pas a modifier l’hauteur et lal largeur des numéros ils sont trés grandes
    vous pouvez m’indiquer comment

    • Malheureusement avec la version actuelle des compteurs ce n’est pas possible… il faudrait une version 100% CSS sans images … ça va venir dès que j’aurais un peu de temps…

  • Jeytri

    Bonjour et merci pour ce guide
    par contre j’ai constaté que si on laisse le compteur ouvert dans un onglet
    puis que l’on surfe sur un autre onglet
    puis que l’on revient sur le compteur, celui-ci c’était bloqué et déroule les chiffres beaucoup plus rapidement pour retomber sur ses pieds.
    Je sais pas si je suis clair mais en gros ouvrez la page démo dans un nouvel onglet, changez d’onglet 30s puis revenez dessus et vous verrez le comportement du compteur.
    C’est corrigeable ?

  • Team94

    bravo trés beau boulot
    j’ai un question
    peut on mettre un bouton stop et un bouton remise a zero sur le compte a rebour si oui un petit chemin d’explication si vous avez le temps 😉

    merci encore

    • Pour le moment ce n’est pas possible… je travaille sur un prochain tuto pour le faire 😉

  • coucou
    j’adore le compteur
    par contre j’ai un souci
    je voudrais mettre sur une page d’accueil un compte a rebours avant le lancement officiel du site
    mais ma question est: ou est ce que je modifie exactement les valeurs pour que ca tombe par exemple pour le jeudi 26 janvier 2012 a 15h00??
    j’ai tenter de faire a droite et a gauche mais ca marche pas
    faut il que je compte le nombre dh’eure, de jour, de minutes et de secondes et que je le mette dans le fichier .js mais ou ca exactement?
    Merci de votre aide !

    • Administrateur Frenchconnectio

      meme misere, ils sont beaux les compteurs, mais impossible de trouver comment definir une date avec une heure pour la fin du compte à rebours.. j’ai essayé plein de trucs mais sans résultats.. un peu d’aide précise ..s’il vous plait mr le developpeur ? 

      • Louisdelaage

        Même galère !

        Merci de nous donner une indication !

        • Louisdelaage

          hé bien j’ai trouvé la solution, il suffit tout simplement de changer la date, (pour moi c’est en ligne 29 du doc original !

          Seul persiste ce probleme de secondes accéléré quand on change d’onglet 

          Merci pour ces infos super !

          • Pour ce problème malheureusement il n’est pas lié au compteur lui-même… enfin je pense !

            Sinon avez-vous essayé le nouveau compteur publié il y a quelques jours ?

          • Louisdelaage

            Oui, il est Top, vous faites un travail génial!

            En fait, celui ci me convient, de plus j’ai besoin de 999 jours.Je voudrais seulement le réduire, par ou est ce le plus simple ?
            Merci de votre attention !!!

    • Désolé de ma réponse tardive ! Pour modifier la date et l’heure, il suffit de modifier le code JavaScript ! 

  • Pingback: 25 milliards de téléchargement d’applications sur iTunes | Le blog des nouvelles technologies : Web, Technologies, Développement, Interopérabilité()

  • Pingback: Un compte à rebours entièrement en jQuery et CSS | Le blog des nouvelles technologies : Web, Technologies, Développement, Interopérabilité()

  • Suite à différents commentaires sur cet article, je vous propose un nouvel article qui va vous permettre de réaliser un compteur entièrement personnalisable. En effet, sur ce dernier, vous pourrez vous-même définir la couleur du compteur, la taille, etc… L’adresse de ce dernier est celle-ci : http://www.blog-nouvelles-technologies.fr/archives/10704/un-compte-a-rebours-entierement-en-jquery-et-css/

  • Crampouz

    Bonjour !
    Merci tout d’abord pour ce script ! C’est le meilleur que j’ai trouvé pour faire ce que je voulais. 
    Un seul hic, impossible de le faire fonctionner le compte à rebours sous ie. Pourtant, je vois dans les explications ci-dessus, que le Jquery permet justement de le faire fonctionner sous ie. Aurais-je louper une manip à faire ?
    Sachant que pour l’instant, je n’ai rien changé au code, j’ai juste téléchargé les fichiers et mis directement sous mon wamp. Tout marche nickel partout, sauf le compte à rebours sous ie.
    Je laisserai volontiers tomber ce navigateur obsolète mais il représente malheureusement encore un petit pourcentage d’utilisateurs.
    Que faire ?
    Merci d’avance

    • Bonjour,

      Merci pour votre retour je regarde dès ce weekend et je reviens vers vous.

      • Crampouz

        Merci !
        Pour info, j’ai aussi testé l’alternative donnée dans le lien ci-dessous (http://www.blog-nouvelles-technologies.fr/archives/10704/un-compte-a-rebours-entierement-en-jquery-et-css/), mais même problème sous ie.
        Décidément, quelle plaie ce navigateur…
        J’attends votre retour et surtout bon courage.

        • Bonjour,

          Pour l’alternative celui-ci est désormais compatible sous IE.

          Pour le problème sous IE, celui-ci a été corrigé.

          • crampouz

            Super ! Merci beaucoup.
            Il faudra que je modifie tout ça avec mon propre design et mon décompte, mais en tout cas la démo fonctionne bien (je n’ai pas testé l’alternative par contre).

            Très bonne soirée et merci encore.

          • Au plaisir !

  • Bonjour, 

    Malheureusement ce problème n’est pas lié au compteur… 🙁

  • Louisdelaage

    Super votre autre topic !
    En fait je préfaire celui ci car il est basé sur l’horloge windows  et c’est exactement ce que je cherche, de plus je suis sur plus de 99 jours.
    Cependent j’ai vraiment du mal à placer le JS, comment le placer au centre, actuellement il doit être en px ou en %.
    J’ai essayer de plusieurs façons mais je débute. Et si je pouvais le réduire d’environ 1/3 se serait top !

    Pourriez vous avoir des élements de réponses ? !Merci de tout ce que vous faites!

    • Malheureusement celui-ci ne peut être facilement redimensionné du fait des images

  • 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é | Web Dev News | Scoop.it()

  • Crampouz

    Bonjour !

    Pour info, j’ai cherché pendant un petit moment comment faire finir le compte à rebours non pas à minuit le jour J , mais à une heure précise de la journée (par exemple, date cible : 30 mars 2012 à 11h00). Alors si jamais un non-développeur comme moi se pose cette question, voilà ce que j’ai rajouté et qui fonctionne.

    Dans le fichier countdown.js, sur la ligne où on indique la date (ligne 4), j’ai rajouté « 11:00 » :
    var target = ’11:00, March 30, 2012′;

    Voilà ! Peut-être évident pour les développeurs, mais moins pour les novices comme moi, héhé, alors je voulais faciliter la tâche à certains.

    Bonne soirée !

    • Cedric

      Salut , j’ai testé mais chez moi ça ne marche pas il me met du 999 presque partout, tu as fait d’autres modifs ?

      • David Blanchet

        Perso je dois le mettre à la fin et ça marche:
        var target = ‘April 11, 2014, 11:00’;

        Voilà 🙂

  • Crampouz

    Oubliez mon dernier post…
    J’avais pris l’habitude de ne tester que sous ie en me disant qeu si ça fonctionnaot là, ça fonctionnerait partout. Et bien que néni. Ma bidouille ne fonctionne QUE sous ie, le gag….
    Du coup, si vous avez une solution à mon problème ?
    Désolé de m’être précipité à poster une mauvaise solution !

  • Crampouz

    Euh, au risque de vous harceler, en fait il semblerait que si, mon avant-dernier message fonctionne partout. Bon ce que je vais faire, c’est que je vais allez dormir et arrêter de faire n’importe quoi. Désolé d’avoir perturbé les commentaires de votre article !

    • Louisdelaage

      sisi tu as bien trouvé Campouz, cela fontionne aussi sur les autres navigateurs si tu fait la meme modification quelques lignes plus loin dans le css (29 pour moi) !

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

  • Spyd

    Bonjour !

    En effet, c’est un très bon tuto.

    Mais j’aimerais ajouter les millisecondes sur l’exemple countdown.js.
    Que faut-il ajouter pour afficher aussi les millisecondes ?

    Merci d’avance

  • Anisse Chagraoui

    Bonjour,

    Je souhaite installer ce compteur sur un logiciel tel que Iweb sur Mac. Il existe déjà un widget permettant de mettre un compteur mais c’est celui-ci que je souhaite installer. Mais n’ayant pas les compétences informatiques requises, j’ai beaucoup de mal à l’installer. Pourriez vous m’aider svp

  • Julie

    Bonjour tout d’abord bravo pour ce code, une question est-il possible de basculer automatiquement sur un site à la fin du décompte ?

  • Julie

    Bonsoir tout d’abord bravo pour ce code, j’ai juste une question est-il possible de créer une redirection vers un site (url) quand le compteur arrive à la fin ? merci beaucoup pour votre aide

  • startx25

    comment de manière simple modifier la taille du compteur,…afin de l’afficher en plus petit. Faut il travailler les images ?

  • Nicolas

    Bonjour,

    Merci pour ce tres beau compteur, Je souhaiterais pouvoir mettre un nombre de fin du compteur que je rentrerais en parametre php mais je ne trouve pas la fonction pour le faire.
    Avez vous une idée ?
    Merci

Lire les articles précédents :
Un grand merci !

Ce jour férié, qui célèbre la fin de la Première Guerre mondiale, est également un jour spécial pour moi car...

Fermer