Compte à rebours personnalisé

Javascript

HTML

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"

‍

Plus de scripts Premium ?

Ajoute un slider interactif sur ton site Webflow avec un effet Avant/Après

Player video Youtube optimisé

Marre de voir tes performances Page Speed Insight réduites à néant à cause d'une seule vidéo dans ta page ? Voici un script pour te permettre d'ajouter une vidéo sans impacter les performances !

Compte à rebours personnalisé

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

Voir