Cuenta regresiva en nuestra página web

¿Qué es una cuenta regresiva?

Cuenta regresiva, cuenta atrás, countdown… como compradores compulsivos que somos, saber que pasado un tiempo ya no podremos adquirir un producto al mismo precio ventajoso, con las mismas condiciones, o que simplemente ya no estará disponible, nos alienta a comprar.

Una cuenta regresiva es un marcador que muestra el tiempo que falta para llegar a cierto momento. La siguiente cuenta atrás nos indica cuanto tiempo falta para el 17 de diciembre del 2100 (12/17/2100 en el código fuente que luego te paso):

Para poder digerir correctamente el código que te paso al final de este artículo, lo ideal sería saber un poco de Javascript. Casualidades de la vida! yo te ofrezco un curso de Javascript 😀

Cuenta regresiva en WordPress

No he encontrado un plugin que me permita hacer cuentras regresivas en WordPress y que realmente me convenza. Oye! a lo mejor los hay pero yo no encontré. Así que las veces que lo he metido, he utilizado este código que te paso a continuación.

Es un código hecho con Javascript, que modifica el contenido de un div de HTML. Necesitarás conocer un pelín de código, sólo para saber donde poner las cosas. El div se escribe en el contenido de la web, y para el Javascript necesitarías un plugin que nos permitiese añadir el código Javascript a nuestras publicaciones. En el caso de la plantilla Genesis, que son las que yo uso, esta funcionalidad ya viene de serie.

Y este es el código (que puedes copiar y pegar o descargarlo en este enlace):

<div id="countdown"></div>
<script>
var end = new Date('12/17/2100 9:30 AM');

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById('countdown').innerHTML = days + ' dias, ';
        document.getElementById('countdown').innerHTML += hours + ' horas, ';
        document.getElementById('countdown').innerHTML += minutes + ' minutos y ';
        document.getElementById('countdown').innerHTML += seconds + ' segundos';
    }

    timer = setInterval(showRemaining, 1000);
</script>