Créer un compte à rebours

Gilles Van Eylen -

Créez un compte à rebours simple qui compte les secondes, minutes, heures et jours jusqu'à n'importe quelle date. Voici un guide pas à pas pour y parvenir. Vous avez juste besoin d'un peu de JavaScript, de CSS et d'HTML.

Exemple

Voici une campagne de démo :

Voilà ce que nous voulons obtenir, maintenant réalisons-le !

Étape 1 : Fixer une date et rédiger un texte pour la fin du compte à rebours

Tout d'abord, vous devez copier ce code dans Apparence > Paramètres avancés > JavaScript :

<script>
// The data/time we want to countdown to
var countDownDate = new Date("Jul 25, 2021 16:37:52").getTime();
// Run myfunc every second
var myfunc = setInterval(function() {
var now = new Date().getTime();
var timeleft = countDownDate - now;
// Calculating the days, hours, minutes and seconds left
var days = Math.floor(timeleft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeleft % (1000 * 60)) / 1000);
// Result is output to the specific element
document.getElementById("days").innerHTML = "J-"+ days +" "
document.getElementById("hours").innerHTML = hours + "h "
document.getElementById("mins").innerHTML = minutes + "m "
document.getElementById("secs").innerHTML = seconds + "s "
// Display the message when countdown is over
if (timeleft < 0) {
clearInterval(myfunc);
document.getElementById("days").innerHTML = ""
document.getElementById("hours").innerHTML = ""
document.getElementById("mins").innerHTML = ""
document.getElementById("secs").innerHTML = ""
document.getElementById("end").innerHTML = "Time's up!";
}
}, 10);
</script>

Étape 2 : Préparer l'apparence de votre compte à rebours

Ensuite, vous devrez également ajouter ce code dans Apparence > Paramètres avancés > CSS :

.counter-row { 
display: flex;
justify-content: center;
color: white;
}

.counter-column {
float: left;
width: 20%;
padding: 10px;
}

.counter-row:after {
content: "";
display: table;
clear: both;
}

@media (max-width: 600px) {
.counter-column { width: 100%; }
}

.counter-row span { display: none; font-weight: bold; }

Vous avez dit que vous vouliez changer les couleurs des cellules ? Utilisez ce code :

.counter-row .counter-column:nth-child(2n+1) { 
background: #12384a !important;
}
.counter-row .counter-column:nth-child(2n) {
background: #fba026 !important;
}

Étape 3 : Mettre en place les labels de temps

Enfin, ajoutez ce code à l'endroit où vous voulez afficher votre compte à rebours :

<div class="counter-row">

<div class="counter-column" style="background-color:#aaa;"><span>DAYS</span>
<div id="days">&nbsp;</div>
</div>

<div class="counter-column" style="background-color:#bbb;"><span>HOURS</span>
<div id="hours">&nbsp;</div>
</div>

<div class="counter-column" style="background-color:#aaa;"><span>MINUTES</span>
<div id="mins">&nbsp;</div>
</div>

<div class="counter-column" style="background-color:#bbb;"><span>SECONDS</span>
<div id="secs">&nbsp;</div>
</div>

</div>

Et voilà !

Besoin d'aide ?

Vous avez une question ou une demande particulière ? Contactez-nous et nous serons heureux de vous aider !