Créer un compte à rebours (countdown)

Créer un compte à rebours (ou countdown) pour un événement spécifique

Language: Javascript

Catégorie : Utilities

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

Sommaire

Utiliser un LLM pour résumer ou expliquer ce script

Le script

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>

Les attributes

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

Valeur

true

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

Nom

Valeur

Nom

Valeur

Nom

Valeur

Tuto

Template

Code source du 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>