SCRIPTWEBFLOWJAVASCRIPT

Compte à rebours classique

Une date limite affichée en clair dans un seul élément texte, avec deux formats au choix.

Voir la démo en directOuvrir l'aperçu Webflow

/ ÉTAPE 01

Copie-colle ce code entre les balises <body> de ta page

Le JavaScript ci-dessous fait fonctionner ton timer. Tu peux modifier la date comme bon te semble.

Variante 01 · format "00:00:00:00"

compte-a-rebours.html
<script>
    // MODIFIEZ LA DATE DE FIN ICI (format ISO 8601)
    const endDate = new Date('2025-12-31T23:59:59'); // Exemple : 31 Décembre 2025 à 23:59:59

    function updateTimer() {
      const now = new Date();
      const diff = endDate - now;

      if (diff <= 0) {
        document.getElementById('timer').textContent = '00:00:00:00';
        clearInterval(intervalId);
        return;
      }

      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
      const minutes = Math.floor((diff / (1000 * 60)) % 60);
      const seconds = Math.floor((diff / 1000) % 60);

      document.getElementById('timer').textContent =
        String(days).padStart(2, '0') + ':' +
        String(hours).padStart(2, '0') + ':' +
        String(minutes).padStart(2, '0') + ':' +
        String(seconds).padStart(2, '0');
    }

    // Mise à jour toutes les secondes
    updateTimer();
    const intervalId = setInterval(updateTimer, 1000);
</script>

Variante 02 · format "00j 00h 00min 00sec"

compte-a-rebours-lettres.html
<script>
    // MODIFIEZ LA DATE DE FIN ICI (format ISO 8601)
    const endDate = new Date('2025-12-31T23:59:59'); // Exemple : 31 Décembre 2025 à 23:59:59

    function updateTimer() {
      const now = new Date();
      const diff = endDate - now;

      if (diff <= 0) {
        document.getElementById('timer').textContent = '00j 00h 00min 00sec';
        clearInterval(intervalId);
        return;
      }

      const days    = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours   = Math.floor((diff / (1000 * 60 * 60)) % 24);
      const minutes = Math.floor((diff / (1000 * 60)) % 60);
      const seconds = Math.floor((diff / 1000) % 60);

      document.getElementById('timer').textContent =
        String(days).padStart(2, '0')   + 'j '   +
        String(hours).padStart(2, '0')  + 'h '   +
        String(minutes).padStart(2, '0')+ 'min ' +
        String(seconds).padStart(2, '0')+ 'sec';
    }

    // Mise à jour toutes les secondes
    updateTimer();
    const intervalId = setInterval(updateTimer, 1000);
</script>

/ ÉTAPE 02

Ajoute l'ID "timer" à ton élément texte

Le script écrit le décompte dans l'élément qui porte cet ID, une fois par seconde.

/ OÙ LE COLLER

DansWebflow, Paramètres › Custom code

CUSTOM CODE

PARAMÈTRES DU PROJET

Head code

<!-- vide -->

Footer code

<script> … </script>

Les codes personnalisés ne s'appliquent qu'après publication.

Footer code, jamais Head

Le script doit s'exécuter après le contenu de la page. Dans le Head, il ne trouverait rien à animer.

Une seule fois pour tout le site

Il se pose au niveau du projet, pas page par page. Les blocs le trouvent tout seuls.

Publier pour activer

Tant que le site n'est pas publié, le code personnalisé ne tourne pas, même en aperçu.

/ LES OPTIONS

Tout se pilote par classe et par attribut.

#timer

ID

L'élément texte qui reçoit le décompte.

endDate

réglage

La date de fin, en haut du script, au format ISO 8601.

/ DANS LA MÊME FAMILLE

Les autres blocs
de date et d'heure.

JAVASCRIPTCompte à rebours personnaliséUn compte à rebours sur mesure pour afficher une date limite.JAVASCRIPTAnnée de copyright automatiqueNe touche plus jamais à la date affichée dans ton footer.JAVASCRIPTSlider avant / aprèsUn slider interactif avec effet avant / après, à poser sur n'importe quelle image.

/ PLUS DE SCRIPTS

Continue à équiper
tes projets.

SCRIPTJAVASCRIPTBouton copier-collerUn bouton qui copie le texte de ton choix, avec son état de confirmation.GRATUIT · 0,8 KO · 3 ÉTAPESSCRIPTJAVASCRIPTAnnée de copyright automatiqueNe touche plus jamais à la date affichée dans ton footer.GRATUIT · 0,2 KO · 2 ÉTAPESSCRIPTJAVASCRIPT · CSSBouton quantité personnaliséUn sélecteur de quantité pour tes boutiques e-commerce ou tes systèmes de devis.GRATUIT · 1,2 KO · 3 ÉTAPES