TutorielsInstaller un compte à rebours en 3 min

Installer un compte à rebours en 3 min dans une page Webacappella Responsive sans plugin !

Voici l’installation de widget la plus rapide de l’histoire ! En 3 minutes à peine, vous aurez installé un compte à rebours sur l’une de vos pages.

Il n’y a pas de fichier css ou js, aucune ligne de code à placer dans les paramètres du site ou dans les propriétés de la page, juste un petit bout de code html.

Placez un “élément html” sur votre page et collez ceci :

</pre>
<span><font size="3"><font face="arial"><font color="#000000"> <div align="center">
<center><script language="JavaScript">
TargetDate = "10/24/2018 10:59 PM";
BackColor = false;
ForeColor = false;
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% &nbsp; %%H%% &nbsp; %%M%% &nbsp; %%S%% ";
FinishMessage = "C'est fini !";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js">
</script></center></div></span>
<pre>

Personnalisation du compte à rebours :

  • Ligne 2 : vous pouvez changer la taille (size=”3”) la police, la couleur et l’alignement (left, center, right)
  • Ligne 4 : vous pouvez changer la date de fin, ATTENTION le premier chiffre correspond au mois, puis le jour et l’année. Pensez également à préciser “AM” ou “PM” après l’heure.
  • Ligne 11 : changez la phrase qui apparaitra à la fin du compte à rebours.

Voila, j’ai pas compté mais ça doit faire 3 minutes qu’on est là, c’est beau non ?!

Big bisous.

18 commentaires

  1. Bonjour, merci pour l’astuce. Je n’ai pas les mots “jours”, “heures”, “minutes” et “secondes” qui s’affiche. Du coup mon compte a rebours n’est qu’une série de chiffre… Puis-je mes faire apparaitre ? Si oui, comment ? Merci d’avance pour votre aide, Seb

  2. Re-salut :),

    j’ai résolu mon problème d’affichage des mots jours, heures, etc par contre quand je publie le site, tout le texte de la page en dessous de la box où j’ai mon code html est décalé. J’ai des interlignes immenses que je n’arrive pas à corriger. Et quand j’enlève la box avec mon code, cela revient à la normal… Une solution quelqu’un ??
    merci d’avance,
    Sébastien

    • Il faut ajouter la fin de balise : juste avant le

      D'ailleurs dans la plus part des cas, la balise 
       peut être supprimée. Sinon on a un carré blanc.
      
      Merci pour le code, ça fonctionne bien
  3. Bonjour à tous !
    Merci pour ce code qui est très utile pour les personnes comme moi qui ne sont pas très douée c’est super!
    J’ai juste un petit problème, j’ai bien réussi à entrer une date, a changer la police et la taille, mais quand je regarde l’aperçu de la page le décompte m’annonce 1042 jours alors que on est le 22 février et que j’ai programmé la date du 19 mars 2018…. ce qui n’est pas le bon nombre de jours d’attente.
    Pourtant j’ai bien fait attention à mettre le mois d’abord puis le jour et l’année, comme vous l’aviez indiqué.
    Pourriez-vous m’aider à chercher la source du problème s’il vous plais?
    Merci d’avance
    Laetitia

  4. Bonjour, perso je n’arrive pas à me débarrasser de la barre blanche avec les bords arrondis en dessous de mon compte à rebours. J’ai vu que pour ça il suffisait de supprimer les lignes 28 et 29, mais dans le code, j’en compte que 15…. Quelqu’un a t’il résolu ce problème ? D’avance merci de votre aide.

  5. Merci pour le partage de ce count down super léger.
    En fait je cherchais un count up.
    J’ai bien galéré pour trouver la solution…
    C’est parfait. ;-l

  6. Pour afficher jours / heures / minutes / secondes, il faut indiquer en ligne 10 :
    DisplayFormat = “Dans %%D%% jours %%H%% heures %%M%% minutes %%S%% secondes “;

  7. Bonjour,
    J’ai collé le fichier HTML ci-dessus et n’ai rien modifié pour le moment dans mon site mais j’ai message suivant “Remarque : le HTML comporte des balises sans correspondance.” et rien ne s’affiche.
    Merci d’avance de votre aide
    Cdt

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée Champs requis marqués avec *

Poster commentaire