Cuenta atrás con JavaScript

En este blog he creado varios artículos que permiten crear una cuenta atrás con JavaScript y otras librerías pero, en este artículo vas a descubrir la fórmula definitiva para disponer de una cuenta atrás en tu sitio web que no tiene ningún desperdicio.

El script que estoy ilustrando no es muy complejo pero te va a ayudar muchísimo con tus habilidades en JavaScript y vas a conocer como manejar el objeto Date que es el que permite trabajar con fechas: años, meses, días, horas, minutos y segundos.

Además, también vas a conocer algunos aspectos o detalles del JavaScript moderno, como la declaración de funciones o la creación de objetos.

Este código de cuenta atrás o regresiva lo puedes utilizar para hacer saber a los usuarios cuanto falta para el lanzamiento de un producto, cuanto falta para iniciar un descuento o cuanto falta para un evento, etc.

Hay muchos usos para una cuenta regresiva.

En el ejemplo en funcionamiento vas a poder ver varias cuentas regresivas en la que su fecha de fin se calcula de forma aleatoria.

La inclusión de una cuenta regresiva en tu página web es muy sencilla usando JavaScript.

Contenedor de la cuenta atrás

En el cuerpo de la página o dentro de la etiqueta <body> puedes agregar un contenedor para agregar la cuenta regresiva, como por ejemplo:

<div id="countdown1"></div>

Código JavaScript para la cuenta regresiva

Crea un archivo countdown.js en tu proyecto para armar la lógica de la cuenta regresiva e incluirlo en la cabecera o dentro del <head> de tu página HTML:

<script src="js/countdown.js"></script>

Por temas de rendimiento, también puedes situar la inclusión de este archivo antes de la etiqueta de cierre </body>.

El archivo countdown.js contiene el siguiente código:

const getTime = dateTo => {
    let now = new Date(),
        time = (new Date(dateTo) - now + 1000) / 1000,
        seconds = ('0' + Math.floor(time % 60)).slice(-2),
        minutes = ('0' + Math.floor(time / 60 % 60)).slice(-2),
        hours = ('0' + Math.floor(time / 3600 % 24)).slice(-2),
        days = Math.floor(time / (3600 * 24));
 
    return {
        seconds,
        minutes,
        hours,
        days,
        time
    }
};
 
const countdown = (dateTo, element) => {
    const item = document.getElementById(element);
 
    const timerUpdate = setInterval( () => {
        let currenTime = getTime(dateTo);
        item.innerHTML = `
            <div class="row">
                <div class="col-lg-2">
                    <div class="countdown-container">
                        <div class="number">
                            ${currenTime.days}
                        </div>
                        <div class="concept">as
                        </div>
                    </div>
                </div>
                <div class="col-lg-2">
                    <div class="countdown-container">
                        <div class="number">
                            ${currenTime.hours}
                        </div>
                        <div class="concept">
                            Horas
                        </div>
                    </div>
                </div>
                <div class="col-lg-2">
                    <div class="countdown-container">
                        <div class="number">
                            ${currenTime.minutes}
                        </div>
                        <div class="concept">
                            Minutos
                        </div>
                    </div>
                </div>
                <div class="col-lg-2">
                    <div class="countdown-container">
                        <div class="number">
                            ${currenTime.seconds}
                        </div>
                        <div class="concept">
                            Segundos
                        </div>
                    </div>
                </div>
            </div>`;
 
        if (currenTime.time <= 1) {
            clearInterval(timerUpdate);
            alert('Fin de la cuenta '+ element);
        }
 
    }, 1000);
};

Necesito la fecha límite, es decir, cuando va a acabar la cuenta regresiva y la fecha actual. Hago la resta que retorna mili segundos y luego lo convierto a días, horas, minutos y segundos de forma que pueda entender una persona. Por último, utilizo la función setInterval() para actualizar la cuenta regresiva cada segundo.

La función getTime() recibe un parámetro, la fecha hasta la que se quiere hacer la cuenta atrás. Esta función retorna un objeto con el tiempo, días, hora, minutos y segundos.

La función countdown() recibe 2 parámetros. La fecha en la que finaliza la cuenta atrás y el elemento HTML que la contiene. Esta función se encarga de localizar el elemento que contiene la cuenta regresiva y ejecutar cada segundo el visualizado del tiempo que falta para llegar a la fecha indicada.

Cuando el tiempo llega a su fin, se imprime una alerta con un mensaje. En este punto, se podría hacer todo lo que se te ocurra. Mostrar un mensaje en algún contenedor, hacer desaparecer la cuenta regresiva e incluso hacer una llamada Ajax para actualizar algo en el servidor.

El contenedor HTML se actualiza cada segundo con el contenido literal del tiempo que falta para llegar a al fecha indicada.

Algo de maquetación CSS

En el caso del ejemplo en funcionamiento estoy usando Bootstrap y algunas reglas CSS que puedes ver a continuación:

.countdown-container {
    padding: 20px;
    background-color: #222222;
    margin-bottom: 20px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
 
.countdown-container .number {
    font-size: 32px;
    text-align: center;
    padding-top: 20px;
    color: #FFFFFF;
    background-color: #000000;
    height: 90px;
}
 
.countdown-container .concept {
    font-size: 28px;
    text-align: center;
    color: #000000;
}

Obteniendo como resultado algo como lo siguiente:

Como puedes comprobar, no me he esmerado demasiado en el diseño pero, ya puedes observar que es totalmente personalizable.

Si mejoráis este diseño, enviar un comentario con el código para que veamos más posibilidades.

Conclusión

He visto muchos códigos para crear una cuenta atrás, también un puñado de plugins pero, este código me convence mucho ya que es JavaScript puro y muy sencillo de personalizar.

No utiliza librerías ni plugins adicionales que suelen tener demasiadas opciones siendo archivos algo grandes que hacen que la página tarde unos mili segundos más en cargar.

Este código pesa muy poco y, además, si tienes conocimientos básicos sobre JavaScript y CSS tienes la posibilidad de personalizarlo completamente.

Ver demo Descargar

Esta entrada ha sido actualizada el 20/08/2019.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(28 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

17 respuestas a “Cuenta atrás con JavaScript”

  1. Edwin Marin dice:

    Esta bueno, todo con javascript moderno, todo ok.

  2. Ginno dice:

    Como hago para quitar el texto «hu Oct 28 2021 19:29:02 GMT-0500 (hora estándar de Colombia)», seria de gran ayuda gracias

  3. cristhian dice:

    Hola, quisiera saber como le haría para que cuando termine el contador me pareciera un mensaje, desde ya muchas gracias

  4. Eduardo barrera dice:

    hola quiero hacer algo parecido a este tutorial pero la verdad no mefunciona el codigo simplemente no me muestra el resultado

  5. Victor dice:

    Gracias, me ha sido de mucha ayuda. 😀

    Hasta he quitado los enlaces a jquery, porque funciona perfectamente sin ellos.

  6. Meg dice:

    Hola Jose eh estado viendo la mayoria de tus articulos desde que encontre tu pagina y me a fascinado este codigo como lo podria acoplar para que al pasar 3min se haga un UPDATE a una tabla de bd mysql?? con php

    saludos

  7. rscosca dice:

    Hola Emanuel,

    eso es porque el contador empieza con 0, es decir, al introducir la fecha 0 es enero, 1 es febrero, 2 es marzo… y así sucesivamente

  8. Emanuel dice:

    Estoy utilizando este contador solo para que sea visualizado, sin que el usuario ingrese una fecha… Introduzco en el codigo la fecha: 2 de marzo de 2013

    var fecha=new Date(\’2013\’,\’3\’,\’2\’,\’11\’,\’00\’,\’00\’)

    y me da como resultado que faltan 90 días y esto no puede ser así. Estamos en 2 de enero.

    ¿Me podrías guiar en como resolverlo?

    Desde ya gracias y disculpas por la molestia.

    Saludos, espero respuesta.

    Emanuel

  9. fernando dice:

    Hola Jose, soy de montevideo.

    sabes te queria preguntar como hacer para este script hacerlo interactuar con php?

    osea que me muestre una cuanta atras con la fecha proporcionada con base de datos mysql?

    este es mi script :
    <?php
    if (!function_exists("GetSQLValueString")) {
    function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
    {
    if (PHP_VERSION

    ...

    function countdown(id){
    var fecha=new Date("")"aqui pongo la fecha extraida desde la base de datos"
    var hoy=new Date()
    var dias=0
    var horas=0
    var minutos=0
    var segundos=0

    if (fecha>hoy){
    var diferencia=(fecha.getTime()-hoy.getTime())/1000
    dias=Math.floor(diferencia/86400)
    diferencia=diferencia-(86400*dias)
    horas=Math.floor(diferencia/3600)
    diferencia=diferencia-(3600*horas)
    minutos=Math.floor(diferencia/60)
    diferencia=diferencia-(60*minutos)
    segundos=Math.floor(diferencia)

    document.getElementById(id).innerHTML='Quedan ' + dias + ' Días, ' + horas + ' Horas, ' + minutos + ' Minutos, ' + segundos + ' Segundos'

    if (dias>0 || horas>0 || minutos>0 || segundos>0){
    setTimeout("countdown("" + id + "")",1000)
    }
    }
    else{
    document.getElementById('restante').innerHTML='Quedan ' + dias + ' Días, ' + horas + ' Horas, ' + minutos + ' Minutos, ' + segundos + ' Segundos'
    }
    }

    • cristian h dice:

      por favor me puedes decir que codigo lleva el archivo index2.php el cual es llamado en esta linea de codigo
      ubicada dentro del body

  10. Alfredia Mews dice:

    Hello there, just changed into alert to your blog through Google, and located that it’s really informative. I am going to watch out for brussels. I will appreciate when you continue this in future. Numerous people will likely be benefited out of your writing. Cheers!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre