Script

Webflow

Compte à rebours classique

Javascript

HTML

CSS

Auteur

Allan Mostafa

Démo lecture seule

Voir

Remix Link

Voir

Démo live

Voir

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

Le javascript ci-dessous te permet de faire fonctionner ton timer. Tu peux modifier la date comme bon te semble.

Variante 01 - Format "00:00:00:00"


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


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

Tutoriel Vidéo

Ajoute l'ID `"Timer"` à ton élément texte

Plus de scripts ?

Réservé aux étudiants CORIACE

Javascript

CSS

HTML

Slider avant/après

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

Voir

Réservé aux étudiants CORIACE

Javascript

CSS

HTML

Transition de page - Slide up

Crées une animation stylée pour tes transitions de page pour une navigation plus fluide !

Voir

Réservé aux étudiants CORIACE

Javascript

CSS

HTML

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 !

Voir

Voir tous les scripts

Compte à rebours classique

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

Tutoriel Vidéo

Ajoute l'ID `"Timer"` à ton élément texte

Plus de scripts ?

+1 100 no-codeurs

Tu veux qu’on crée le site de ton entreprise ?

Compte à rebours classique

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

Tutoriel Vidéo

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

Plus de scripts ?

+1 100 no-codeurs

Tu veux qu’on crée le site de ton entreprise ?

Ajoute l'ID `"Timer"` à ton élément texte