Blog de Robert Sebille


Vers mon curriculum vitae - Conception

Accueil > Technique > Javascript > Décompte jQuery avant, pendant et après un événement.

Décompte jQuery avant, pendant et après un événement.

lundi 30 juillet 2018, par Robert

Ce décompte va afficher un décompte javascript jours, heures, minutes, secondes avant le début d’un événement, puis afficher un compte javascript jours, heures, minutes, secondes au moment où l’événement débute, et enfin à redémarrer ce compte au moment où l’événement finit.

Explication

Le code est ci-dessous. Tel quel il donnera au 30 juillet 2018 pm quelque chose comme :

Tue Jul 30 2019 10:00:00 GMT+0200 (CEST)
Sat Aug 03 2019 18:00:00 GMT+0200 (CEST)
364 day(s) 16:06:00 remaining.

Le 30 juillet 2019 à 10:00:00 CEST, au début de l’événement, il commencera à compter ; par exemple à 10:00:02, il affichera :

Tue Jul 30 2019 10:00:00 GMT+0200 (CEST)
Sat Aug 03 2019 18:00:00 GMT+0200 (CEST)
Event started since 0 day(s) 00:00:02

Le 3 août 2019 à 18:00:00 CEST, à la fin de l’événement, il commencera un nouveau compte ; par exemple, à 18:00:01, il affichera :

Tue Jul 30 2019 10:00:00 GMT+0200 (CEST)
Sat Aug 03 2019 18:00:00 GMT+0200 (CEST)
Event completed since 0 day(s) 00:00:01

Il est aisé d’adapter ce code à vos besoins, dates, textes, et code si vous vous y connaissez un peu.

- eventStart contient la date de début de l’événement.
- eventEnd contient la date de fin de l’événement.
- remain contient le texte affiché après le décompte pré-événement.
- eventStartedSince contient le texte affiché pendant le compte pendant l’événement ; il est affiché avant le compte.
- eventCompletedSince contient le texte affiché pendant le compte après l’événement ; il est affiché avant le compte.

Le code

<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">

jQuery(document).ready  ( function ( $ ) {

/*  
   Décompte javascript avant, compte pendant et après un événement

   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation, either version 3 of the License, or
   (at your option) any later version.

   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.

   You should have received a copy of the GNU General Public License
   along with this program.  If not, see <https://www.gnu.org/licenses/>.

   Robert Sebille, http://sebille.name

*/

   // Date de debut et de fin, format = new Date("Month DD, YYYY HH:MM:SS")
   var eventStart = new Date("July 30, 2019 10:00:00");
   var eventEnd   = new Date("August 03, 2019 18:00:30");

   var remain = " remaining.";
   var eventStartedSince = "Event started since ";
   var eventCompletedSince = "Event completed since ";


   // Vous pouvez changer ci-dessous si vous vous y connaissez
   var eventStartSeconds = eventStart.getTime() / 1000;
   var eventEndSeconds = eventEnd.getTime() / 1000;
   var j = 0, h = 0, m = 0, s = 0;
   var timeToFormat = 0;
   $('SPAN.jourj').text(eventStart);
   $('SPAN.jourf').text(eventEnd);

   // Ajoute un zéro si le nombre est inférieur à 10
   formatNumber =  function (  n  )  {
       return (n < 10 ? '0' : '') + n;
   };


   function formatTime ( ) {
           // nombre de jours
           j = Math.floor(timeToFormat / 86400);
           timeToFormat -= j * 86400

           // nombre d'heures
           h = Math.floor(timeToFormat / 3600);
           timeToFormat -= h * 3600

           // nombre de minutes
           m = Math.floor(timeToFormat / 60);
           timeToFormat -= m * 60

           // nombre de secondes
           s = Math.floor(timeToFormat);

   }


   var chrono=setInterval  ( function (   )  {
       // le temps restant en secondes
       var nowTime = Math.round(Date.now() / 1000);

       // Temps avant l'evenement
       if (nowTime < eventStartSeconds) {
           timeToFormat = eventStartSeconds - nowTime;
           $('SPAN.avant').text("");
           $('SPAN.apres').text(remain);
           formatTime();
       }

       // Temps pendant l'evenement
       if (nowTime >= eventStartSeconds && nowTime < eventEndSeconds) {
           timeToFormat = nowTime - eventStartSeconds;
           $('SPAN.avant').text(eventStartedSince);
           $('SPAN.apres').text("");
           formatTime();
       }

       // Temps apres l'evenement
       if (nowTime >= eventEndSeconds) {
           timeToFormat = nowTime - eventEndSeconds;
           $('SPAN.avant').text(eventCompletedSince);
           $('SPAN.apres').text("");
           formatTime();
       }

       $('SPAN.jours').text(formatNumber(j));
       $('SPAN.heures').text(formatNumber(h));
       $('SPAN.minutes').text(formatNumber(m));
       $('SPAN.secondes').text(formatNumber(s));

   },1000);

 });

</script>

<style>
DIV.decompte {margin-bottom: 5px;}
DIV.decompte SPAN.em {
   box-shadow:1px 1px 1px rgba(4,4,4,.35);
   background: linear-gradient(#585858,#6B6B6B);
   color: white;
   padding-left: 5px;
   padding-right: 5px;
   font-weight: bold;
}

</style>

</head>
<body>



<div class="decompte"><span class="jourj em"></span></div>
<div class="decompte"><span class="jourf em"></span></div>

<div class="decompte"><span class="avant"></span><span class="jours em"></span> day(s) <span class="heures em"></span>:<span class="minutes em"></span>:<span class="secondes em"></span><span class="apres"></span></div>


</body>
</html>

Un fichier html joint avec le code

C’est pratique, vous pouvez tester en cliquant dessus ;)

Un message, un commentaire ?

modération a priori

Attention, votre message n’apparaîtra qu’après avoir été relu et approuvé.

Qui êtes-vous ?
Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.