Cuenta regresiva con Javascript

Hola blogeros, hoy os traigo como poner una cuenta regresiva en vuestra página web de forma fácil con Javascript.

Lo primero de todo ¿Qué es esto?

Con cuenta regresiva, cuenta atrás o countdown me refiero a ese contador que tal vez ya hayas visto en una web si tan ansioso has esperado para ir a un festival, o para coger algún descuento antes de que se agote el tiempo, etc… Simplemente es un contador que va disminuyendo hasta llegar a cierto tiempo.

A continuación, os pongo el código y el ejemplo de cómo se vería, luego ya cada uno puede mejorarlo y adaptarlo para su web dándole formato con CSS.

<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>

DÍAS PARA LA PRÓXIMA BLOG QUEDADA

Si tienes tu web alojada en un CMS cómo WordPress y eres de los que prefiere instalar plugins, no te preocupes, hay varios que harán esto por ti, tú tan solo tendrás que preocuparte por darle el formato para adaptarlo a tu web.

Aquí os dejo los mejores plugins de cuenta regresiva que he encontrado:

T(-) Countdown

Es un contador desarrollado con jQuery, que te permite personalizar e incluir en un widget, en una entrada o en página mediante un shortcode.

Countdown – Countdown & Clock

Igual que el anterior nos permite añadir un contador de forma sencilla en nuestra web, con la posibilidad de crear contadores independientes cada uno con su respectivo diseño. Se puede insertar fácilmente la cuenta regresiva con un shortcode.

En este vídeo podréis observar mejor como se realiza su configuración y la inserción de este en una entrada, página o widget. Estableciendo el color que más se adapte al estilo de la web.


WordPress Countdown Plugin

Ahora ya no tienes excusa para no poner un countdown en tu sitio web.

Nos vemos en el siguiente post. !Hasta pronto¡