Efecto Javascript para refrescar el Reloj de una Cuenta Regresiva

relog

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.

Cuenta atrás en javascript

Es muy sencillo de desarrollar una cuenta atrás en javascript. Para aplicarlo simplemente tenemos que seguir estos 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 con javascript 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.

Cuenta atrás con una barra de progreso en javascript

También puede darse el caso de que en lugar de mostrar dígitos queramos mostrar una barra con la cuenta atrás. Podemos crear la típico “barra cargando…” haciendo uso del componente barra de progreso de jQuery UI.

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í

 

Hosting

Te recomendamos...

Deja un comentario

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