Impact (?) le 13 avril 2036, soit dans

Centenaire le 29 avril 2063, soit dans

Naissance le 29 avril 1963, soit dans

Code HTML :

  <p>Impact le 13 avril 2036, soit dans <output data-fin="2036,3,13"></output></p>
  <p>Centenaire le 29 avril 2063, soit dans <output data-fin="2063,3,29"></output></p>

Le HTML5 permet de créer ses propres attributs.

Code JS :

  /* tab = tableau des balises ayant l'attribut "data-fin"
  fin est une string : "aaaa,m,j,h,m,s"  où m commence à zéro */
  var tab=document.querySelectorAll("[data-fin]");
  var taille=tab.length;
  var now = new Date().getTime();
  var i,fin,countDownDate,distance,days,hours,minutes,seconds,str_j,str_h,str_m,str_s;

  /* Update the count down every 1 second */
  var x = setInterval(function() {

    for(i=0;i<taille;i++){

      fin=tab[i].getAttribute("data-fin");
      countDownDate = new Date(fin).getTime();

      /* Find the distance between now and the count down date */
      distance = countDownDate - now;

      /* Time calculations for days, hours, minutes and seconds */
      days = Math.floor(distance / (1000 * 60 * 60 * 24));
      hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      seconds = Math.floor((distance % (1000 * 60)) / 1000);

      /* Display the result in the element with id="demo" */
      str_j=" jour "; if(days>1) str_j=" jours ";
      str_h=" heure "; if(hours>1) str_h=" heures ";
      str_m=" minute "; if(minutes>1) str_m=" minutes ";
      str_s=" seconde"; if(seconds>1) str_s=" secondes";

      tab[i].innerHTML = days + str_j + hours + str_h + minutes + str_m + seconds + str_s;

      /* If the count down is finished, write some text */
      if (distance < 0) {
        /*clearInterval(x); */
        tab[i].innerHTML = "EXPIRÉ";
      }

    }

  }, 1000); /* 1000 millièmes de secondes */

CountDown Timer