Creando cuenta regresiva en JavaScript

Calculando  cuenta regresiva con Javascript

El día de hoy, escribiré un pequeño tutorial de cómo crear una cuenta regresiva o countdown en Javascript. Este tipo de código puede ser muy útil para aquellas páginas que quieren mostrar una fecha de lanzamiento o un "coming soon".

Este ejercicio es ideal para aquellas personas que comienzan a programar en JavaScript y que tienen nociones básicas con HTML.


Ejemplo de cuenta regresiva

Seleccione la fecha inicial y la fecha futura para el cálculo de los días que existe entre ambas fechas.

Fecha inicial


Fecha futura

Diferencia

* días

Reloj cuenta regresiva

Cuenta regresiva en días

El siguiente ejercicio consta de una función sencilla hecha en JavaScript para el cálculo de la cuenta regresiva entre 2 fechas dadas devolviendo como resultado la cantidad de días entre ambas fechas.

Este tipo de cálculo puede ser muy útil para muchos casos. Por ejemplo, puede ayudar a calcular:

  • Los días que faltan para el lanzamiento de un sitio web
  • Los días que faltan para un cumpleaños
  • Los días que faltan para algún evento importante
  • Los días que faltan para realizar un pago
  • El número de días que hay entre 2 fechas dadas

Paso 1

Lo primero que vamos a hacer es trabajar en el código de Javascript.

Inicialmente, vamos a establecer las variables de las fechas.

Para este ejemplo, una de las fechas será el día en curso (hoy) y la siguiente fecha es posterior y estará previamente definida.

Código JavaScript


/*** ESCRIBIR LAS FECHAS A CALCULAR ***/

// La primera variable, initialDay, será la fecha del día de hoy	
let initialDay = new Date();


// La segunda variable, endingDay, será la fecha posterior que se desea calcular. Por ejemplo el 19 de octubre de 2079
let endingDay = new Date("10/19/2079");

Paso 2

Una vez establecidas las fechas, el siguiente paso será crear una función que nos ayude a calcular la diferencia de días entre ambas fechas.

Para este ejemplo, la función que nos ayudará a calcular el número de días, se llamará calculateNumberOfDays y esta función podrá recibir 2 parámetros que serán la fecha inicial (date1) y la fecha posterior (date2).

Por ahora, la función no tiene adentro algún código para calcular algo pero eso se hará en el siguiente paso.

Código JavaScript


let initialDay = new Date();
let endingDay = new Date("10/19/2079"); 
		
/*** SE CREA UNA FUNCIÓN PARA CALCULAR EL NÚMERO DE DÍAS ***/

function calculateNumberOfDays (date1, date2) {
  // Aún no hay código adentro de la función
}


Paso 3

Dentro de la función que se acaba de crear, se crea una nueva variable que se llama differenceInTime que lo que hace es calcular el tiempo entre las fechas.

Para este ejemplo, se utilizará la función del lenguaje de programación de JavaScript  conocida como alert que lo que hace es devolver un cuadro de alerta en el navegador. Esto lo utilizaremos solamente para que el navegador nos muestre el valor de la variable. Existen otras formas, como console.log para mostrar este tipo de valores pero como este es un ejercicio didáctico, se hará con alert para que sea más evidente para el usuario.

Después, para ejecutar la función, debemos pasar los valores de la fecha de hoy (initialDay) y la fecha posterior (endingDay) y la función hará los cálculos correspondientes.

Código JavaScript


let initialDay = new Date();
let endingDay = new Date("10/19/2079"); 	

function calculateNumberOfDays (date1, date2) {
		
 // Se calcula la diferencia de tiempo entre las 2 fechas
			
    let differenceInTime = date2.getTime() - date1.getTime();
    alert("differenceInTime = "+differenceInTime); 
			
}
		
/*** SE LLAMA A LA FUNCIÓN CON LOS DATOS A CALCULAR ***/
calculateNumberOfDays(initialDay, endingDay);

Si todo sale bien, al actualizar la página, deberá parecer un mensaje de alerta parecido a esta imagen:

Mensaje de alerta para mostrar la variable differenceInTime


Paso 4

Una vez que se tiene calculada la diferencia de tiempo a través de la variable differenceInTime, ahora toca convertir esa diferencia de tiempo a la diferencia de días entre ambas fechas.

Para esto se crea una nueva variable que se llama differenceInDays, esta lo que hace es convertir el la diferencia de tiempo en días.

Dentro de la fórmula de la variable, cabe mencionar que getTime() es calculado en milisegundos, por lo que variable differenceInTime se calcula también así. Por lo que dentro de la fórmula, el divisor está compuesto por una multiplicación en donde:

  • Cada segundo tiene 1000 milisegundos
  • Cada minuto tiene 60 segundos y cada hora tiene 60 minutos. La multiplicación entre ambas dan como resultado 3600
  • Cada día tiene 24 horas

La función Math.Ceil() en JavaScript se usa para redondear el número a su entero más cercano en dirección ascendente del redondeo.

Código JavaScript


let initialDay = new Date();
let endingDay = new Date("10/19/2079"); 	

function calculateNumberOfDays (date1, date2) {
    let differenceInTime = date2.getTime() - date1.getTime();
			
	// Se calcula el número de días entre las 2 fechas
    let differenceInDays = Math.ceil(differenceInTime / (1000 * 3600 * 24));
    alert("differenceInDays = "+differenceInDays);

}
		
calculateNumberOfDays(initialDay, endingDay);
 

Al volver a actualizar la página, deberá aparecer un mensaje de alerta similar a esta imagen:

Mensaje de alerta para mostrar la variable differenceInDays


Paso 5

Ahora que ya tenemos la diferencia de los días, solo falta decirle al navegador que escriba el resultado para que el usuario lo pueda leer. 

Lo que hacemos a continuación es escribir dentro del body del html lo siguiente:

Código HTML


<body>
<span id="countdown-amount">*</span><br/>
<span id="countdown-day">Días</span>
</body>
		

En donde el contenedor span con el id countdown-amount va a mostrar los días una vez que el javascript le devuelva los valores.

Se agrega una línea de código más a la función calculateNumberOfDays para que escriba los resultados en el DOM, que es la estructura de objetos que genera el navegador cuando se carga un documento.

Código JavaScript


let initialDay = new Date();
let endingDay = new Date("10/19/2079"); 	

function calculateNumberOfDays (date1, date2) {
    let differenceInTime = date2.getTime() - date1.getTime();
    let differenceInDays = Math.ceil(differenceInTime / (1000 * 3600 * 24));

	// Mostrar el resultado final en el HTML
	document.getElementById("countdown-amount").innerHTML = differenceInDays;

} calculateNumberOfDays(initialDay, endingDay);

Al actualizar nuevamente la página,  el dom deberá ser modificado y los resultados deben de ser similares a esta imagen:

El dom es modificado por el JavaScript ejecutado


Paso 6

¿Qué pasaría si la fecha de la variable fuera menor a la fecha actual? por ejemplo, si en vez de tener inicialmente el año 2079 fuera el 2019. El resultado en este caso sería un número negativo y quizás esto es algo que no queremos en el código. Por ejemplo:

resultado en dom negativo

Para cambiar esto en el código, podemos sustituir la última parte del mismo dentro de la función para definir que sucede cuando falta un día, cuando ya se está en el último día y finalmente cuando la fecha ya expiró o es menor a la fecha inicial.

Código JavaScript


let initialDay = new Date();
let endingDay = new Date("10/19/2019"); 	

function calculateNumberOfDays (date1, date2) {
    let differenceInTime = date2.getTime() - date1.getTime();
    let differenceInDays = Math.ceil(differenceInTime / (1000 * 3600 * 24));

	// Mostrar el "nuevo" resultado final en el HTML
	if(differenceInDays >= 2){
       document.getElementById("countdown-amount").innerHTML = "Faltan " + differenceInDays;    
	   document.getElementById("countdown-day").innerHTML = " días";
    } else if(differenceInDays == 1) {
       document.getElementById("countdown-amount").innerHTML = "";
       document.getElementById("countdown-day").innerHTML = " Falta un día";
    } else if(differenceInDays == 0) {
       document.getElementById("countdown-amount").innerHTML = "";
       document.getElementById("countdown-day").innerHTML = "Hoy es el último día";
    } else {
       document.getElementById("countdown-amount").innerHTML = "Ya han pasado "+Math.abs(differenceInDays)+" días desde que se venció el tiempo.";
       document.getElementById("countdown-day").innerHTML = " Sin días disponibles";
    }

} calculateNumberOfDays(initialDay, endingDay);

Código fuente del ejercicio


<body>
<p><span id="countdown-amount">*</span><span id="countdown-day">Días</span></p>

<script>

	let initialDay = new Date();
	let endingDay = new Date("10/19/2019"); 	

	function calculateNumberOfDays (date1, date2) {
		let differenceInTime = date2.getTime() - date1.getTime();
		let differenceInDays = Math.ceil(differenceInTime / (1000 * 3600 * 24));

		// Mostrar el "nuevo" resultado final en el HTML
		if(differenceInDays >= 2){
		   document.getElementById("countdown-amount").innerHTML = "Faltan " + differenceInDays;    
		   document.getElementById("countdown-day").innerHTML = " días";
		} else if(differenceInDays == 1) {
		   document.getElementById("countdown-amount").innerHTML = "";
		   document.getElementById("countdown-day").innerHTML = " Falta un día";
		} else if(differenceInDays == 0) {
		   document.getElementById("countdown-amount").innerHTML = "";
		   document.getElementById("countdown-day").innerHTML = "Hoy es el último día";
		} else {
		   document.getElementById("countdown-amount").innerHTML = "Ya han pasado "+Math.abs(differenceInDays)+" días desde que se venció el tiempo.";
		   document.getElementById("countdown-day").innerHTML = " Sin días disponibles";
		}
	}

	calculateNumberOfDays(initialDay, endingDay);
 </script> </body> 
Joomla 4 está oficialmente listo

Artículos relacionados

 

By accepting you will be accessing a service provided by a third-party external to https://ikita.com.mx/v3/

Clientes / Proyectos

0
Compartido