SCRIPTWEBFLOWJAVASCRIPT

Compte à rebours personnalisé

Un compte à rebours dont tu dessines chaque bloc : jours, heures, minutes et secondes vivent dans tes propres éléments texte.

/ ÉTAPE 01

Copie-colle ce script dans le <body> de ta page

Le JavaScript ci-dessous fait fonctionner ton compte à rebours personnalisé. Tu peux modifier la date comme bon te semble.

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

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

      const values = {
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0
      };

      if (diff > 0) {
        values.days = Math.floor(diff / (1000 * 60 * 60 * 24));
        values.hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
        values.minutes = Math.floor((diff / (1000 * 60)) % 60);
        values.seconds = Math.floor((diff / 1000) % 60);
      }

      document.querySelectorAll('[data-timer]').forEach(el => {
        const unit = el.getAttribute('data-timer');
        if (unit in values) {
          el.textContent = String(values[unit]).padStart(2, '0');
        }
      });

      // Arrêter si terminé
      if (diff <= 0) clearInterval(intervalId);
    }

    // Lancement du timer
    updateTimer();
    const intervalId = setInterval(updateTimer, 1000);
</script>

/ ÉTAPE 02

Ajoute les attributs à tes éléments "Text"

Chaque bloc du compte à rebours porte l'attribut "data-timer" avec l'unité qu'il affiche : days, hours, minutes ou seconds.

/ 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.

data-timer

days · hours · minutes · seconds

L'unité affichée par l'élément texte qui porte l'attribut.

endDate

réglage

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