Cargando

Ir a contenido

X


Ver Más! HP lanza su gama de impresoras HP OffiJet pro. Una solución interesante para las necesidades de impresión en la oficina, con el ahorro por bandera y un sistema de reposición de tinta más que interesante. ¿Te lo vas a perder?


 


Cuenta regresiva con JavaScript

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


Escrito por el ago 31 2015 17:57


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



2 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.


Rubén Valencia
feb 13 2018 22: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!
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 5.5K
  •   Nivel
    Profesional