Cargando



Cuenta regresiva con JavaScript

Te mostramos cómo puedes implementar una sencilla cuenta regresiva utilizando JavaScript.


ago 31 2015 18:57
Profesional
abr 26 2016 13:06

Cuando se quiere lanzar una página web o un producto determinado, existen veces que se quiere generar cierta expectativa y para ello nada mejor que implementar un conteo regresivo indicando cuanto falta en semanas, días, horas, minutos, etc.

 

Esto queda bastante bien y nos da un agregado a nuestra página que hará que los usuarios se interesen por esperar que la cuenta regresiva finalice y ver que les espera luego de que esta termine y a pesar que puede sonar un poco complicado es una funcionalidad bastante sencilla de incluir.

 

Nuestro código

Para realizar nuestra funcionalidad de conteo regresivo vamos a necesitar unas librerías especializadas que incluiremos al final del tutorial, entre ellas tenemos jQuery y jquery lwtCountdown, además del CSS especializado. Primero vamos a incluirlas de la siguiente forma:
<script language="javascript" type="text/javascript" src="js/jquery-1.4.1.js"></script>
			    <script language="javascript" type="text/javascript" src="js/jquery.lwtCountdown-1.0.js"></script>
			    <script language="javascript" type="text/javascript" src="js/misc.js"></script>
			    <link rel="stylesheet" type="text/css" href="style/main.css"></link>
Una vez incluido esto tendremos nuestros div o contenedores con la información de los contadores por semana, días, horas, entre otros, lo cual podemos modificar a nuestro gusto:
<div id="container">

							   <h1>Algo grandioso se avecina</h1>
							   <h2 class="subtitle">Esta atento a los avances</h2>

							   <div id="countdown_dashboard">
											   <div class="dash weeks_dash">
															   <span class="dash_title">Semanas</span>
															   <div class="digit">0</div>
															   <div class="digit">0</div>
											   </div>

											   <div class="dash days_dash">
															   <span class="dash_title">Dias</span>
															   <div class="digit">0</div>
															   <div class="digit">0</div>
											   </div>

											   <div class="dash hours_dash">
															   <span class="dash_title">Horas</span>
															   <div class="digit">0</div>
															   <div class="digit">0</div>
											   </div>

											   <div class="dash minutes_dash">
															   <span class="dash_title">Minutos</span>
															   <div class="digit">0</div>
															   <div class="digit">0</div>
											   </div>

											   <div class="dash seconds_dash">
															   <span class="dash_title">Segundos</span>
															   <div class="digit">0</div>
															   <div class="digit">0</div>
											   </div>

							   </div>
Ahora la parte donde debemos modificar para adaptar a nuestras necesidades y el tiempo específico en donde saldrá nuestra página o producto es el siguiente script de JavaScript, en el cual les pasamos el día, el mes, el año, y si lo deseamos las horas. La librería tomará estos datos y los convertirá en una cuenta regresiva, veamos:
<script language="javascript" type="text/javascript">
 jQuery(document).ready(function() {
 $('#countdown_dashboard').countDown({ 
targetDate: { 
'day': 12, 
'month': 9, 
'year': 2015, 
'hour': 11, 
'min': 0, 
'sec': 0 } }); }); 
</script>
Lo más curioso de esto es que no debemos hacer nada, ya que la librería hace todo por nosotros. Veamos cómo luce nuestra cuenta regresiva.

 

video-animado.gif

 

 

Como vemos hemos implementado nuestra cuenta regresiva en cuestión de minutos, y todo gracias a las facilidades de librerías especializadas hechas en JavaScript, librerías que nos brindan funcionalidades de calidad que nos darán ese valor agregado a nuestro sitio web o producto con el menor esfuerzo posible.

 

Fichero Adjunto  cuenta-regresiva-JavaScript.zip   79,93K   1279 Descargas


¿Te ayudó este Tutorial?


2 Comentarios


Jose Jaime
ago 16 2016 12:41

Hola buenos dias, esta genial el JS pero necesitaria hacerle una modificacion me podrias decir como quitarle las semanas.

 

Gracias de antemano.


Rubén Valencia
feb 13 2018 23:43

Está genial el conteo regresivo. ¿Cómo puedo incluir el mes?

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X