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

Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

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

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

  • 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

  • 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

  • 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

  • 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

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>