Tous nos scripts

Utilities

Créer un compte à rebours (countdown)

<script>
function startCountdown(targetDateString, targetHourString) {
  const fullDateString = `${targetDateString}T${targetHourString}Z`;
  const targetDate = new Date(fullDateString).getTime();

  const interval = setInterval(() => {
    const now = new Date().getTime();
    const distance = targetDate - now;

    if (distance < 0) {
      clearInterval(interval);
      document.querySelector('[js-util-countdown-days]').textContent = 0;
      document.querySelector('[js-util-countdown-hours]').textContent = 0;
      document.querySelector('[js-util-countdown-minutes]').textContent = 0;
      document.querySelector('[js-util-countdown-seconds]').textContent = 0;
      return;
    }

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.querySelector('[js-util-countdown-days]').textContent = days;
    document.querySelector('[js-util-countdown-hours]').textContent = hours;
    document.querySelector('[js-util-countdown-minutes]').textContent = minutes;
    document.querySelector('[js-util-countdown-seconds]').textContent = seconds;
  }, 1000);
}

const countdownElement = document.querySelector('[js-util-countdown="true"]');
const targetDateString = countdownElement.getAttribute('js-util-countdown-date');
const targetHourString = countdownElement.getAttribute('js-util-countdown-hour');
startCountdown(targetDateString, targetHourString);
</script>

Etape 1 - Ajouter le script sur la page ou le projet Webflow

<!-- Scripts by Justa | Countdown -->
<script src="https://cdn.jsdelivr.net/npm/@justaa/scripts/dist/util/countdown.js"></script>
<script>
function startCountdown(targetDateString, targetHourString) {
  const fullDateString = `${targetDateString}T${targetHourString}Z`;
  const targetDate = new Date(fullDateString).getTime();

  const interval = setInterval(() => {
    const now = new Date().getTime();
    const distance = targetDate - now;

    if (distance < 0) {
      clearInterval(interval);
      document.querySelector('[js-util-countdown-days]').textContent = 0;
      document.querySelector('[js-util-countdown-hours]').textContent = 0;
      document.querySelector('[js-util-countdown-minutes]').textContent = 0;
      document.querySelector('[js-util-countdown-seconds]').textContent = 0;
      return;
    }

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.querySelector('[js-util-countdown-days]').textContent = days;
    document.querySelector('[js-util-countdown-hours]').textContent = hours;
    document.querySelector('[js-util-countdown-minutes]').textContent = minutes;
    document.querySelector('[js-util-countdown-seconds]').textContent = seconds;
  }, 1000);
}

const countdownElement = document.querySelector('[js-util-countdown="true"]');
const targetDateString = countdownElement.getAttribute('js-util-countdown-date');
const targetHourString = countdownElement.getAttribute('js-util-countdown-hour');
startCountdown(targetDateString, targetHourString);
</script>
Copier

Etape 2 - Ajouter les attributes correspondants

Paragraph - Identifier les éléments jours, heures, minutes et secondes

Nom

js-util-countdown-days

Valeur

Ajouter l'attribute à l'élément qui servira à afficher les jours

Faire de même pour les heures (js-util-countdown-hours), les minutes (js-util-countdown-minutes) et les secondes (js-util-countdown-seconds)

Aucune valeur nécessaire

Div - Identifier la div wrapper des éléments jours, heures, minutes et secondes

Nom

js-util-countdown

Copié !

Valeur

true

Copié !

Ajouter l'attribute au wrapper qui comprendra les 4 unités de temps

Exemple :

Si la DIV coutdown-wrapper est le parent des éléments js-util-countdown-days, js-util-countdown-hours, js-util-countdown-minutes, js-util-countdown-seconds, alors ajouter l'attribute à cet élément

Div - Identifier la div wrapper et lui ajouter la date de fin

Nom

js-util-countdown-date

Valeur

[identifier]

Ajouter la date visée (et uniquement la date) au format US

‍

Exemple :

Pour arrêter le countdown le 31 Décembre 2023, mettre l'attribute js-util-countdown-date=2023-12-31

Div - Identifier la div wrapper et lui ajouter l'heure de fin

Nom

js-util-countdown-hour

Valeur

[identifier]

Ajouter l'heure visée (et uniquement l'heure) au format standard

‍

Exemple :

Pour arrêter le countdown à 21:35:20, mettre l'attribute js-util-countdown-hour=21:25:20

Tuto, template & scripts

Tuto

Template

Script

<script>
function startCountdown(targetDateString, targetHourString) {
  const fullDateString = `${targetDateString}T${targetHourString}Z`;
  const targetDate = new Date(fullDateString).getTime();

  const interval = setInterval(() => {
    const now = new Date().getTime();
    const distance = targetDate - now;

    if (distance < 0) {
      clearInterval(interval);
      document.querySelector('[js-util-countdown-days]').textContent = 0;
      document.querySelector('[js-util-countdown-hours]').textContent = 0;
      document.querySelector('[js-util-countdown-minutes]').textContent = 0;
      document.querySelector('[js-util-countdown-seconds]').textContent = 0;
      return;
    }

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.querySelector('[js-util-countdown-days]').textContent = days;
    document.querySelector('[js-util-countdown-hours]').textContent = hours;
    document.querySelector('[js-util-countdown-minutes]').textContent = minutes;
    document.querySelector('[js-util-countdown-seconds]').textContent = seconds;
  }, 1000);
}

const countdownElement = document.querySelector('[js-util-countdown="true"]');
const targetDateString = countdownElement.getAttribute('js-util-countdown-date');
const targetHourString = countdownElement.getAttribute('js-util-countdown-hour');
startCountdown(targetDateString, targetHourString);
</script>
Copier

Etape 2 - Ajuster le code pour votre besoin

Copié dans le presse-papiers
Logo Justa

Progressez sur Webflow

Oops! Une erreur s'est produite lors de la soumission du formulaire.