Pop up con contador de días

Posted on: Vie, 12/11/2021 - 18:59 By: dalbarracin

 <style>
        .bannersuperior  {width:100%; background-color:#EC7B0B; padding:20px 0 0 0; color:#ffffff; margin:0 auto; position:relative; }
.boxer {
     border-collapse: collapse;
    display:inline-block;
}

.boxer .box {      margin: auto;
   display: table-cell;
   text-align: center;
   vertical-align: top;
   border: 0px solid black;
    width:25%;
    padding-left: 5px;
}
#days,#hours,#minutes,#seconds{ font-size:1.4em; font-weight:bold}
   
        </style>
        
            <div class="row bannersuperior">
  
  
       <div class="text-center pb0 pt0 col-lg-9">INTEGRALIS WEEK: todos los cursos al 50% off    <a style="margin-left:5px" class="btn btn-blanconaranja mb-2" href="https://www.cursosintegralis.org/integralis-week">Aprovecha la oferta</a></div> 
       

<div class="text-center pb0 pt0 col-lg-3">
    <div class="boxer">
    <div class="box-row">
        <div class="box"><span id="days"></span><br />días</div>
        <div class="box"><span id="hours"></span><br />horas</div>
        <div class="box"><span id="minutes"></span><br />minutos</div>
        <div class="box"><span id="seconds"></span><br />segundos</div>
        
        
    </div>
   </div>
   
   </div>
       
       
</div>
   
<script>

const DATE_TARGET = new Date('10/01/2021 11:59 PM');

const SPAN_DAYS = document.querySelector('span#days');
const SPAN_HOURS = document.querySelector('span#hours');
const SPAN_MINUTES = document.querySelector('span#minutes');
const SPAN_SECONDS = document.querySelector('span#seconds');
// Milliseconds for the calculations
const MILLISECONDS_OF_A_SECOND = 1000;
const MILLISECONDS_OF_A_MINUTE = MILLISECONDS_OF_A_SECOND * 60;
const MILLISECONDS_OF_A_HOUR = MILLISECONDS_OF_A_MINUTE * 60;
const MILLISECONDS_OF_A_DAY = MILLISECONDS_OF_A_HOUR * 24

//===
// FUNCTIONS
//===

/**
 * Method that updates the countdown and the sample
 */
function updateCountdown() {
    // Calcs
    const NOW = new Date()
    const DURATION = DATE_TARGET - NOW;
    const REMAINING_DAYS = Math.floor(DURATION / MILLISECONDS_OF_A_DAY);
    const REMAINING_HOURS = Math.floor((DURATION % MILLISECONDS_OF_A_DAY) / MILLISECONDS_OF_A_HOUR);
    const REMAINING_MINUTES = Math.floor((DURATION % MILLISECONDS_OF_A_HOUR) / MILLISECONDS_OF_A_MINUTE);
    const REMAINING_SECONDS = Math.floor((DURATION % MILLISECONDS_OF_A_MINUTE) / MILLISECONDS_OF_A_SECOND);
    // Thanks Pablo Monteserín (https://pablomonteserin.com/cuenta-regresiva/)

    // Render
    SPAN_DAYS.textContent = REMAINING_DAYS;
    SPAN_HOURS.textContent = REMAINING_HOURS;
    SPAN_MINUTES.textContent = REMAINING_MINUTES;
    SPAN_SECONDS.textContent = REMAINING_SECONDS;
}

//===
// INIT
//===
updateCountdown();
// Refresh every second
setInterval(updateCountdown, MILLISECONDS_OF_A_SECOND);    
    
    
    
</script>