Efecto Javascript para refrescar el Reloj de una Cuenta Regresiva


Me contrataron para desarrollar la programación del sitio web IndustriasArgentinas.com, una red social para negocios entre empresas, y me ordenaron la posibilidad de mostrar en pantalla un reloj que vaya indicando la cantidad de minutos y segundos que faltaban para que ocurra un determinado evento.

En el siguiente link puedes ver un ejemplo de lo que me pedía mi cliente, una cuenta regresiva de 2 minutos:
http://www.blogdephp.com/resultados-codigos-fuentes-php/demo-script-javascript-para-actualizar-reloj-cuenta-regresiva-minutos-segundos.php

El código lo encontré en el siguiente link http://www.plus2net.com/javascript_tutorial/countdown.php correspondiente al sitio plus2net.com.

Es muy sencillo de aplicar, consta de sólo 3 pasos:

  1. crear la función javascript llamada “display_c” dentro las etiquetas y de tu código html.
  2. en el evento onload de tu etiqueta , llamas a la función javascript creada arriba:
    <body onload="display_c(120);"

    (el parámetro entre paréntesis es la cantidad de segundos que deseas para tu cuenta regresiva).

  3. Por último, dentro de la etiqueta incluyes un “span” con nombre “ct” donde se imprimirá el reloj (el nombre del span es importante que sea “ct”):
    <span id='ct'></span>

Listo, ya te debería funcionar!

En este caso le pasamos cómo parámetro un valor constante (120 segundos) que equivale a 2 minutos. Pero podríamos hacer que el reloj que nos haga la cuenta regresiva hacia cualquier fecha y hora que desiemos. Lo importante es saber la cantidad de segundos que faltan entre la fecha/hora actual y la fecha/hora deseada. ¿Recuerdas que vimos un post halando sobre el tema de fechas?
Ver post donde aprendimos a calcular los segundos de diferencia entre dos fechas en PHP.

Recuerda que tu también puedes contratarme para el desarrollo de tus páginas webs. Simplemente debes comentarme tus requerimientos y yo te estimo presupuesto y tiempos de entrega. Escríbeme aquí


Nota del autor: Busco programadores y diseñadores freelance para colaborarme con proyectos. Mostrame tus trabajos desarrollados, escribime!


Te agradaría derivar tu proyecto a un programador con años de experiencia?

Ing. Diego Angelini.
Autor de BlogdePHP.com
Programador Web Freelance






Porfolio de proyectos