Cuenta atrás online en javascript

En este artículo aprenderemos a realizar una cuenta atrás online en javascript. Una cuenta atrás online puede ser muy útil para especificar el momento exacto de inauguración de una página web, para especificar el fin de una oferta…

Cómo realizar una cuenta atrás online en javascript

Existen muchos plugins en el mercado web con excelentes diseños para crear una cuenta atrás en javascript. Sería muy sencillo hacer un recopilatorio de los mejores plugins de cuenta atrás online para nuestra web, pero no es ese el objetivo. No hay nada mejor que saber hacer las cosas por uno mismo, y éste va a ser el caso, vamos a crear nuestro propio plugin de cuenta atrás online en javascript.

cuenta atras online

Para ello necesitaremos como siempre un editor de texto y un navegador para comprobar los resultados de lo que vamos haciendo.

Existen muchas maneras de realizar una cuenta regresiva en javascript, en este artículo veremos varios ejemplos:

Ejemplo práctico de cuenta atrás online con javascript

1- Preparación del html

En primer lugar prepararemos la estructura inicial html, como queremos darle diseño con css y estilos, guardaremos en diferentes <div > los días, las horas, los minutos y los segundos:

2- Preparamos el javascript para darle funcionalidad

Explicación del código

En primer lugar hemos creado una función getTimeRemaining, donde  guardaremos en diferentes variables, por una parte la t, que es el tiempo total en milisegundos, los días, las horas, los minutos y los segundos. Para que el resultado por defecto no nos aparezca en milisegundos, dividiremos entre 1000 cada una de las variables. Si recordamos las clases de la EGB y la ESO, donde nos enseñaron a pasar de días a horas, de horas a minutos y de minutos a segundos, seremos capaces de hacer lo propio para este caso.

Código final

Ver resultado del código

Más código de cuenta atrás online con javascript

Como hemos comentado anteriormente, hay múltiples maneras de hacer una cuenta atrás en javascript, simplemente hay que buscar aquel código que se adapte más a vuestras necesidades, o simplemente el código que comprendáis mejor. En el siguiente link podemos ver otra forma de hacerlo distinta, pero llegando al mismo resultado

Aplicaciones de una cuenta atrás online

Realizar una cuenta atrás online puede tener múltiples aplicaciones, una de las más habituales es la de mostrar el tiempo restante para la inauguración de una página web, aunque no es la única. Muchas empresas o tiendas online utilizan el truco de la cuenta atrás para especificar la fecha de finalización de una oferta o de una promoción.

Para hacer un ejercicio de este tipo es conveniente dominar o manejar con cierta soltura el método date de javascript

Si te sirve de ayuda, no dudes en compartir!Share on LinkedInShare on FacebookTweet about this on TwitterPin on PinterestShare on Google+

Deja un comentario