Créer un compte à rebours

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 un exemple :

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("counter-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>

<div id="counter-end">&nbsp;</div>

Et voilà !

Besoin d'aide ?

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