Ejercicios Básicos de Fechas JavaScript
En el siguiente tutorial vamos a practicar las funciones de fechas con unos cuantos ejercicios.
Si no recuerdas cómo trabajar con fechas en JavaScript aquí te dejo el enlace a nuestro tutorial. Métodos de la clase Date JavaScript
Ejercicio 1
Vsmos a empezar formateando una fecha para mostrarla en español
Realiza un script que escriba en el documento la fecha y hora actual.
La salida deberá tener elsiguiente formato:
Hoy es martes, 23 de Abril de 2023 y son las 14:32 horas.
Solución
var fecha = new Date(); // Obtiene un objeto fecha actual.
var dia;
var vardia = fecha.getDay(); // getDay() devuelve el dia de la semana.(0-6).
switch (vardia) { // Algoritmo para calcular el dia según el número.
case 0:
dia = "Domingo";
break;
case 1:
dia = "Lunes";
break;
case 2:
dia = "Martes";
break;
case 3:
dia = "Miercoles";
break;
case 4:
dia = "Jueves";
break;
case 5:
dia = "Viernes";
break;
case 6:
dia = "Sabado";
break;
}
var mes;
// Algoritmo para calcular el mes según el número.
switch (fecha.getMonth() + 1) { // getMonth() devuelve el mes (0-11).
case 1:
mes = "Enero";
break;
case 2:
mes = "Febrero";
break;
case 3:
mes = "Marzo";
break;
case 4:
mes = "Abril";
break;
case 5:
mes = "Mayo";
break;
case 6:
mes = "Junio";
break;
case 7:
mes = "Julio";
break;
case 8:
mes = "Agosto";
break;
case 9:
mes = "Septiembre";
break;
case 10:
mes = "Octubre";
break;
case 11:
mes = "Noviembre";
break;
case 12:
mes = "Diciembre";
break;
}
var diames = (fecha.getDate()); // getDate() devuelve el dia(1-31).
var ano = fecha.getFullYear(); // getFullYear() devuelve el año(4 dígitos).
var hora = fecha.getHours(); // getHours() devuelve la hora(0-23).
var min = fecha.getMinutes(); // getMinutes() devuelve los minutos(0-59).
if ((min >= 0) && (min < 10)) { // Algoritmo para añadir un cero cuando el min tiene 1 cifra.
min = "0" + min;
}
var salida = "Hoy es " + dia + ", " + diames + " de ";
var salida = salida + mes + " de " + ano + " y son las ";
var salida = salida + hora + ":" + min + " horas";
document.write(salida);
Ejercicio 2
En el siguiente ejercicio vamos a calcular el tiempo que ha pasado entre dos acciones
Realiza un script que pida un nombre y dos apellidos e indique el tiempo que se tardó en introducir los datos.
La salida sería algo así como : En introducir Luís Perez Alonso ha tardado 25 segundos.
Solución
// Guardamos el objeto con la fecha actual
var fecha1 = new Date();
// Obtenemos la fecha Unix (Milisegundos desde 1970 hasta el objeto fecha).
var tiempo1 = fecha1.getTime();
// Pedimos los datos por teclado
var nombre = prompt("Introduce el Nombre:");
var ape1 = prompt("Introduce apellido 1:");
var ape2 = prompt("Introduce Apellido 2:");
// Volvemos a guardar la fecha actual
var fecha2 = new Date();
// Y obtenemos la fecha Unix de esa fecha
var tiempo2 = fecha2.getTime();
// Calculamos el total entre la fecha 1 y la 2
var total = (tiempo2 - tiempo1) / 1000;
// Le decimos que fije los decimales en 1
total = total.toFixed(1);
// Imprimimos el resultado
document.write("En introducir " + nombre + " " + ape1 + " " + ape2 + " ha tardado " + total + " segundos.");
Ejercicio 3
En el siguiente ejercicio vamos a imprimir un calendario
Realiza un script pida un mes y año e imprima su calendario.
No hace falta esmerarse en la presentación del calendario, el calendario simplificado puede ser del tipo:
OCTUBRE – 2014
1 (miercoles), 2 (jueves), ….. , 31 (viernes).
Solución
// PEDIMOS EL MES Y EL AÑO EN NÚMERO
var mes = Number(prompt("Introduce Mes"));
var ano = Number(prompt("Introduce Año"));
// RESTAMOS 1 AL MES PORQUE EN JAVASCRIPT VAN DE 0-11
mes = mes - 1;
// CREAMOS UN OBJETO FECHA CON LOS DATOS
var fecha = new Date(ano, mes);
var vardia = fecha.getDay(); //getDay() devuelve el dia de la semana.(0-6).
// CALCULAMOS EL NOMBRE DEL MES SEGÚN EL NÚMERO
switch (mes) { //Algoritmo para saber el nombre del mes.
case 0:
mesletras = "Enero";
break;
case 1:
mesletras = "Febrero";
break;
case 2:
mesletras = "Marzo";
break;
case 3:
mesletras = "Abril";
break;
case 4:
mesletras = "Mayo";
break;
case 5:
mesletras = "Junio";
break;
case 6:
mesletras = "Julio";
break;
case 7:
mesletras = "Agosto";
break;
case 8:
mesletras = "Septiembre";
break;
case 9:
mesletras = "Octubre";
break;
case 10:
mesletras = "Noviembre";
break;
case 11:
mesletras = "Diciembre";
break;
}
// iMPRIMIMOS EL TÍTULO CON EL NOMBRE DEL MES Y EL AÑO
document.write("<h1>" + mesletras + " de " + ano + "</h1>");
// HACEMOS UN BUCLE QUE SE REPITA MIENTRAS EL MES NO CAMBIE
while (fecha.getMonth() == mes) {
// CALCULAMOS EL DIA DE LA SEMANA SEGÚN EL NÚMERO
switch (fecha.getDate()) { // Algoritmo para calcular el dia según el número.
case 0:
dia = "Domingo";
break;
case 1:
dia = "Lunes";
break;
case 2:
dia = "Martes";
break;
case 3:
dia = "Miercoles";
break;
case 4:
dia = "Jueves";
break;
case 5:
dia = "Viernes";
break;
case 6:
dia = "Sabado";
break;
}
// IMPRIMIMOS EL DÍA Y EL DIA DE LA SEMANA
document.write(fecha.getDate() + "(" + dia + ")<br>");
// SUMAMOS 1 DÍA AL OBJETO FECHA
fecha.setDate(fecha.getDate() + 1);
}
Ejercicio 4
En el siguiente ejercicio vamos a sumar días a una fecha
Realiza un script que pida una fecha y muestre tres fechas que sean la fecha introducida a 30, 60 y 90 días.
Solución
// PEDIMOS LOS DATOS POR TECLADO
var ano = Number(prompt("Año:"));
var mes = Number(prompt("Mes"));
var dia = Number(prompt("Día"));
mes--; // Restamos 1 para colocar el mes exacto en el objeto Date.
var fecha = new Date(ano, mes, dia); //Crea objeto fecha de la fecha introducida.
document.write("Fecha Actual: ");
if (fecha.getDate() < 10) { // Añadir un cero cuando el dia es menor que diez.
document.write("0" + fecha.getDate());
} else {
document.write(fecha.getDate());
}
document.write("/");
if (fecha.getMonth() < 9) { // Añadir un cero cuando el mes es menor que 9+1.
document.write("0" + (fecha.getMonth() + 1)); // Para mostrar el mes sumarle 1.
} else {
document.write(fecha.getMonth() + 1); // Sumamos 1 para que ponga el mes correcto.
}
document.write("/" + fecha.getFullYear() + ".<br>");
var i,j;
var plazo = 30; // Variable para sacar 30, 60 y 90.
for (i = 0; i < 3; i++) { // Bucle para las otras tres fechas.
document.write("Fecha a " + plazo + " días: ");
fecha.setMonth(fecha.getMonth() + 1); // Se suma un mes a la fecha.
if (fecha.getDate() < 10) { // Poner un cero delante en los dias menores de 10.
document.write("0" + fecha.getDate());
} else {
document.write(fecha.getDate());
}
document.write("/");
if (fecha.getMonth() < 9) { // Poner un cero delante a los meses menores de 9+1;
document.write("0" + (fecha.getMonth() + 1)); // Sumamos 1 para que ponga el mes correcto.
} else {
document.write(fecha.getMonth() + 1);
}
document.write("/" + fecha.getFullYear() + ".<br>");
plazo += 30;
}
Ejercicio 5
Para finalizar vamos a hacer un script de un reloj
Realiza un script que muestre un reloj en pantalla con fecha y hora y que se actualice cada segundo con la función setTimeout
Solución
<HTML>
<HEAD>
<script language="JavaScript">
var reloj = 0;
var frecuencia = 1000;
function actualiza() {
var ahora = new Date();
var fecha = ahora.getDate() + " - " + (ahora.getMonth() + 1) + " - " + ahora.getFullYear();
var hora = ahora.getHours() + ":" + ahora.getMinutes() + ":" + ahora.getSeconds();
var escribe = 'Hoy es ' + fecha + ' y son las ' + hora + ' horas';
var situa = document.getElementById('capa0');
situa.innerHTML = escribe;
reloj = setTimeout("actualiza()", frecuencia);
}
</script>
<TITLE>Cronómetro</TITLE>
</HEAD>
<BODY onLoad="actualiza()" ;>
<div id="capa0"> </div>
</BODY>
</HTML>
Más ejercicios de JavaScript
Ejercicios de Iniciación JavaScript 1
Ejercicios de Iniciación JavaScript 2
Ejercicios de Iniciación JavaScript 3
Ejercicios de Iniciación JavaScript 4
Ejercicios de Iniciación JavaScript 5
Ejercicios de Iniciación JavaScript 6
Ejercicios para aprender JavaScript 1
Me gusta esto:
Me gusta Cargando...
Relacionado
Una idea sobre “Ejercicios Básicos de Fechas JavaScript”
Kamilore, thanks! And thanks for sharing your great posts every week!