Ejercicios Básicos de Fechas JavaScript

Vamos con unos ejercicios de fechas. 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

Ejercicios

1.Realiza un script que escriba en el documento la fecha y hora actual. La salida deberá tener elsiguiente formato:

Hoy es martes, 28 de Febrero de 2018 y son las 14:32 horas.

Solución

<script> 
        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);
</script>

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

<script>
    //Guardamos 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.");
</script>

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

<script>
        //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);
        }
</script>

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

<script>
        //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;
        }
</script>

5. Realiza un script que muestre un reloj en pantalla con fecha y hora y que se actualice cada segundo. 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>