Blog de Robert SebilleAccueil > Technique > Informatique > 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
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:02Le 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:01Il 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 ;)
