Cuenta atrás con javascript versión mejorada

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (6 votos, promedio: 4,17 de 5)
Loading ... Loading ...

En este artículo vamos a ilustrar una versión mejorada de los scripts countdown javascript que puede ser utilizado para mostrar el tiempo que queda en días, horas, minutos y segundos para que termine un evento, oferta o lo que fuese.

La función principal esta desarrollada en javascript para que se ejecute en el cliente. Es decir, la cuenta atrás se verá en marcha mientras los usuarios visualizan la página.

La función javascript es la siguiente y debe recibir parámetros globales (año, mes, dia, hora, minuto y segundo) para pasarlos a un objeto Date de javascript. Seguidamente ya realizamos las funciones necesarias para mostrar el tiempo restante a la fecha introducida.

function countdown(id){
    var fecha=new Date('2012','1','10','21','00','00')
    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'
    }
}

En el ejemplo en funcionamiento podremos seleccionar una fecha futura mediante un formulario que contiene un input para introducir la fecha y que al enviarla se acojeran los datos necesarios para visualizar el tiempo restante. La función se ejecuta recursivamente cada segundo imitando la funcionalidad de un reloj.

En el <body> de nuestra página simplemente deberemos tener lo siguiente:

<body onload="countdown('contador')">
        <div id='contador'></div>
        ...
</body>

Ver ejemplo en funcionamiento

También puedes ver una versión mejorada en cuando a diseño en la visualización de la cuenta atrás. Ver

6 comentarios para “Cuenta atrás con javascript versión mejorada

Deja un comentario

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

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>