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>