Autre

Créer un compte à rebours

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

Copier ce script

Etape 1

Copier le script et le coller sur votre page ou projet Webflow

<script>
  (function() {
    var deadline = '2020-07-11 00:00';
  
    function pad(num, size) {
        var s = "0" + num;
        return s.substr(s.length-size);
    }
  
    function getTimeRemaining(endtime) {
      var t = Date.parse(endtime) - Date.parse(new Date()),
          seconds = Math.floor((t / 1000) % 60),
          minutes = Math.floor((t / 1000 / 60) % 60),
          hours = Math.floor((t / (1000 * 60 * 60)) % 24),
          days = Math.floor(t / (1000 * 60 * 60 * 24));
  
      return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
      };
    }
  
    function clock(id, endtime) {
      var days = document.getElementById(id + '-days')
          hours = document.getElementById(id + '-hours'),
          minutes = document.getElementById(id + '-minutes'),
          seconds = document.getElementById(id + '-seconds');
  
      var timeinterval = setInterval(function() {
        var t = getTimeRemaining(endtime);
  
        if (t.total <= 0){
          clearInterval(timeinterval);
        } else {
    days.innerHTML = pad(t.days, 2);
    hours.innerHTML = pad(t.hours, 2);
    minutes.innerHTML = pad(t.minutes, 2);
    seconds.innerHTML = pad(t.seconds, 2);
    }
      }, 1000);
    }
  
    clock('never-late', deadline);
  })();
</script>
Copier

Etape 2

Intégrer sur Webflow en adaptant à votre projet et votre configuration

  • Changer la deadline pour votre compte à rebours
  • Mettre un wrapper qui comprendra le coutdown avec l'ID js-clock
  • Changer l'ID de chaque élément qui comprendra les jours, heures, minutes et secondes par respectivement js-clock-days, js-clock-hours, js-clock-minutes et js-clock-seconds