cuenta regresiva javascript

Cuenta regresiva en JavaScript

Esta cuenta regresiva en JavaScript, es un pequeño trabajo que mis jefes me pidieron para una pagina de productos.

El concepto de la cuenta regresiva en JavaScript, es que el tiempo se reinicie cada X cantidad de tiempo para crear nuevas promociones que duren solo por ese tiempo restante.

Cuenta Regresiva parte HTML

Código primario HTML bien simple

<div style="font-size: 55px;text-align: center; margin: 30px auto; width: 80%;">
        <p id="countdown"></p>
    </div>

Codigo Javascript

El script se moverá alrededor de la función de tiempo «Date()» y aquí les dejos el código:

var countDDate = new Date(),
            endday = new Date(), days =6;
            countDDate.setDate(countDDate.getDate() - (countDDate.getDay() + 2)%7);
            endday.setDate(countDDate.getDate() + days);
            endday.getTime();
            countDiv = document.getElementById('countdown');
        var x = setInterval(function(){
            var now = new Date().getTime();
            var daterest = endday - now;
            var days = Math.floor(daterest / (1000 * 60 * 60 * 24)),
                hours = Math.floor((daterest % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
                minutes = Math.floor((daterest % (1000 * 60 * 60)) / (1000 * 60)),
                seconds = Math.floor((daterest % (1000 * 60)) / 1000);
            
            countDiv.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
        }, 1000);

El código se describe como, la declaración de una fecha que vamos a configurar previamente porque queremos que la fecha cambie cada X cantidad de días.

Luego creamos el intervalo con «setInterval()», lo cual genera el contador que mostraremos en la pagina y permitirá que la fecha se reinicie cada X cantidad de días, en mi caso, una semana.

El resultado final con algo de estilo seria este como referencia;

contador regresiva javascript con estilo

Translate »
Scroll al inicio