Retour au blog
Partager l'article
Feja - twitterFeja - Linkedincopy clipboard

Comment intégrer un décompte sur Webflow ?

François De Sousa
14 Oct, 2022
-
3 min de lecture

Aperçu 📚

Vous avez une offre limitée dans le temps ou bien un projet incroyable pour lequel un décompte peut être un moyen de teaser votre communauté ?

Voici une solution simple pour intégrer un compte à rebours dans vos projets Webflow. Codepen original de Matt Smith

Pour l'ajouter à votre projet, suivez les étapes simples et ajoutez le code personnalisé dans les paramètres de votre projet ou de votre page.

Instructions ✍️

1. Ajoutez le code personnalisé à votre page.

Accédez à la zone des paramètres de votre projet ou de votre page et ajoutez le code personnalisé dans la zone before </body> tag.

Vous pouvez voir que ce code fait référence à quelques #IDs, ce sont les jours, heures, minutes et secondes assignable aux éléments de votre page


    <script> 
    // Original Pen by Matt Smith 
    const second = 1000,
          minute = second * 60,
          hour = minute * 60,
          day = hour * 24;

    let countDown = new Date('Oct 09, 2023 00:00:00').getTime(),
        x = setInterval(function() {

          let now = new Date().getTime(),
              distance = countDown - now;

          document.getElementById('days').innerText = Math.floor(distance / (day)),
            document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
            document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
            document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);

          //do something later when date is reached

        }, second)
    </script>

2. Ajoutez des éléments de texte pour afficher les minutes, les jours, les mois,

Ajoutez des éléments de texte à votre page selon vos besoins : jours, heures, minutes, secondes. Dans ce cas, vous ajouterez 4 éléments de texte à votre page, en oubliant pas par la suite d’assigner les bons ID aux bons éléments de texte.

3. Ajouter #ID pour les jours, heures, minutes, secondes

Lorsque votre élément de texte est sélectionné, accédez au panneau des paramètres et ajoutez les ID correspondant au type d'élément de compte à rebours dont vous avez besoin.

Comme mentionné, ces #ID sont

  • jours
  • heures
  • minutes
  • secondes

Vous pouvez voir comment nous faisons la même chose pendant des heures.

4. Publier et tester

C'est tout, vous pouvez le publier et tester qu'il fonctionne comme prévu.

Feja logo
Feja - Linkedin
Rejoignez-nous sur les réseaux sociaux.