Cargando

Ir a contenido


 


Cuenta regresiva con JavaScript

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


Escrito por el ago 31 2015 17:57 javascript html css


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.

 

 

 

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   468 Descargas

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
9.5
VOTA
5
75%
4
25%
3
0%
2
0%
1
0%

  Información

  •   Publicado ago 31 2015 17:57
  •   Actualizado abr 26 2016 12:06
  •   Visitas 3.9K
  •   Nivel
    Profesional



1 Comentarios


Jose Jaime
ago 16 2016 11:41

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

 

Gracias de antemano.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse