<div class="container text-center pt-2">
<h2>Time until december 31, 2019 23:59:59</h2>
</div>
<div class="container-fluid d-flex justify-content-center mt-3 pt-2 pb-2 counter">
<div class="card text-center counter-box">
<div class="card-body">
<span class="days">00</span>
</div>
<div class="card-footer text-center">Días</div>
</div>
<div class="card text-center counter-box">
<div class="card-body">
<span class="hours">00</span>
</div>
<div class="card-footer text-center">Horas</div>
</div>
<div class="card text-center counter-box">
<div class="card-body">
<span class="minutes">00</span>
</div>
<div class="card-footer text-center">Minutos</div>
</div>
<div class="card text-center counter-box">
<div class="card-body">
<span class="seconds">00</span>
</div>
<div class="card-footer text-center">Segundos</div>
</div>
</div>
.counter {
width: auto;
}
.counter-box {
width: 150px;
margin: 0 15px;
color: #dc3545;
}
.counter-box span{
font-size: 3em;
font-weight: 700;
}
.counter-box .card-footer {
background-color: #103552;
color: white;
}
/*
Base script from w3schools.com
https://www.w3schools.com/howto/howto_js_countdown.asp
*/
// Set the date we're counting down to
var countDownDate = new Date("Dec 31, 2019 23:59:59").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
if(days < 10) {
document.querySelector('.days').innerHTML = '0' + days;
} else {
document.querySelector('.days').innerHTML = days;
}
if(hours < 10) {
document.querySelector('.hours').innerHTML = '0' + hours;
} else {
document.querySelector('.hours').innerHTML = hours;
}
if(minutes < 10) {
document.querySelector('.minutes').innerHTML = '0' + minutes;
} else {
document.querySelector('.minutes').innerHTML = minutes;
}
if(seconds < 10) {
document.querySelector('.seconds').innerHTML = '0' + seconds;
} else {
document.querySelector('.seconds').innerHTML = seconds;
}
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
}
}, 1000);