« anterior próximo »
Páginas: [1]

Autor Tema: Crear calendario perpetuo con JavaScript Objeto Date Métodos Ejercicio CU01162E  (Leído 5468 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Crear calendario perpetuo con JavaScript Objeto Date Métodos Ejercicio CU01162E
« en: 17 de Noviembre 2015, 23:15 »
Hola.

Citar
EJERCICIO
Crea un documento HTML que conste de un título h1 con el texto <<Calendario>>, y un div central de 400 por 400 px con el borde marcado y márgenes de 100px en todas direcciones. Dentro del div central crea una tabla de 7 columnas por 7 filas (total 49 celdas) con ancho de tabla 300 píxeles y tamaño de fuente en la tabla 24 píxeles. La primera columna corresponderá a lunes y la última a domingo. Usa un método JavaScript para determinar el mes actual. Mediante código JavaScript, haz que aparezca dinámicamente como texto encima de la tabla el mes y año de que se trate (por ejemplo <<MAYO DE 2050>>). Haz que cada celda de la primera fila se rellene indicando el día de la semana (Lu – Ma – Mi – Ju – Vi –Sa –Do). Haz que la tabla se rellene dinámicamente (al cargar la página) con:
a) Espacio en blanco si no corresponde ningún día.
b) El número del día del mes según corresponda (28, 30 ó 31 días según de qué mes se trate).
Ten en cuenta que debe generarse el calendario del mes en que te encuentres según la hora local del sistema (de tu computador).
El aspecto, suponiendo que te encuentras en el mes de mayo de 2050, sería el siguiente:



Aquí el código:

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
body{font-size: 24px;}
#caja{width:400px; height:400px; margin: 100px auto; text-align: center;}
#tabla{border-collapse: collapse; border: solid 2px; width: 300px; margin: 50px;}
</style>
<script type="text/javascript">
window.onload = function() {
calendario();
}
function calendario(){
miFecha = new Date();
var nombreDia = ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'];
var nodoTd = document.getElementsByTagName('td');
var diaSemana = getDiaDeInicio(miFecha);
var diasEnMes = getDiasPorMes(miFecha.getMonth(), miFecha.getFullYear());
rellenaTabla(nodoTd, diasEnMes, diaSemana, nombreDia);
rellenaMesYAnno(miFecha);
}
function rellenaMesYAnno(miFecha){
document.getElementById('mesYAnno').innerHTML = getMes(miFecha.getMonth()) + ' de ' +  miFecha.getFullYear();
}
function rellenaTabla(nodoTd, diasEnMes, diaSemana, nombreDia){
for(var i = 0; i < nodoTd.length; i++){
if(i>0 && i<8){nodoTd[i].innerHTML = nombreDia[i-1];}
if(i>7 && i<(diasEnMes+8+diaSemana)){
if((i-8)<diaSemana){
nodoTd[i].innerHTML = ' ';
}else{
nodoTd[i].innerHTML = i - 7 - diaSemana;
}
}
}
}
function getDiaDeInicio(fecha){
var diaSemana = fecha.getDay();
for(var i = fecha.getDate(); i>0; i--){
if(diaSemana == 0){
diaSemana = 7;
}
diaSemana--;
}
if(diaSemana==0){diaSemana=7;}
return diaSemana
}
function getMes(mes){
switch(mes) {
case 0:
return 'Enero';
break;
case 1:
return 'Febrero';
break;
case 2:
return 'Marzo';
break;
case 3:
return 'Abril';
break;
case 4:
return 'Mayo';
break;
case 5:
return 'Junio';
break;
case 6:
return 'Julio';
break;
case 7:
return 'Agosto';
break;
case 8:
return 'Septiembre';
break;
case 9:
return 'Octubre';
break;
case 10:
return 'Noviembre';
break;
case 11:
return 'Diciembre';
break;
default:
break;
}
}
function getDiasPorMes(mes, anno){
switch(mes){
case 0:
case 2:
case 4:
case 6:
case 7:
case 9:
case 11:
return 31;
break;
case 3:
case 5:
case 8:
case 10:
return 30;
break;
case 1:
if (((anno%100 == 0) && (anno%400 == 0)) || ((anno%100 != 0) && (anno%4 == 0))){
return 29;
}else{
return 28;
}
break;
default:
break;
}
}
</script>
</head>
<body>
<h1 id="diasemana"> Calendario </h1>
<div id="caja">

<table id="tabla">
<tr>
<td colspan="7" id="mesYAnno"></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
</div>
<span id="prueba"></span>
</body>
</html>
Saludos.
« Última modificación: 18 de Noviembre 2015, 11:59 por Mario R. Rancel »
En línea

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Re:Crear calendario perpetuo con JavaScript Objeto Date Métodos Ejercicio CU01162E
« Respuesta #1 en: 18 de Noviembre 2015, 11:59 »
Buenos días Pedro

Felicitarte porque el ejercicio no era sencillo y lo has resuelto perfectamente. Quizás haya algún detalle mejorable o alguna cosa que se pudiera haber hecho de otra manera pero el código se ve limpio y bien estructurado, buen diseño con buena división por funciones, etc. Mi enhorabuena!

Saludos
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Crear calendario perpetuo con JavaScript Objeto Date Métodos Ejercicio CU01162E
« Respuesta #2 en: 18 de Noviembre 2015, 17:37 »
Gracias por los comentarios y la corrección Mario.

Saludos.
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".