DERNIÈRE CHANCE
DERNIÈRE CHANCE
En savoir plus
Webflow

Compte à rebours personnalisé

Javascript
CSS
Auteur
Aurélien Gallier
Démo lecture seule
Voir
Démo live
Voir

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

Le javascript ci-dessous te permet de faire fonctionner ton compte à rebours personnalisé. Tu peux modifier la date comme bon te semble.


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

Tutoriel Vidéo

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

Crée un compte à rebours personnalisé sur ton site rapidement pour afficher une date limite !

Envie d'aller plus loin ?
Illustration pour la formation webflow gratuite de CORIACE
Je m'inscris