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

Autor Tema: Date JavaScript crear calendario del mes getMonth getFullYear código CU01162E  (Leído 3467 veces)

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Date JavaScript crear calendario del mes getMonth getFullYear código CU01162E
« en: 25 de Marzo 2016, 02:20 »
Buenas noches.

Pongo una solución del ejercicio CU01162E del curso JavaScript desde cero.

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

El código JavaScript:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style>
div{
border: solid;
width: 400px;
height: 400px;
margin: 100px;
text-align: center;
}
table{
width: 300px;
font-size: 24px;
text-align: center;
}
</style>
<script type="text/javascript">

window.onload = function(){

var rellenarDias = ["Lu","Ma","Mi","Ju","Vi","Sa","Do"];
var diasSemana = document.getElementsByTagName('th');

for(var i=0;i<diasSemana.length;i++){
diasSemana[i].textContent = rellenarDias[i];
}

var fechaAlmacenada = new Date();
var mesAlmacenado = fechaAlmacenada.getMonth();
var anyoAlmacenado = fechaAlmacenada.getFullYear();
var miFecha = new Date(anyoAlmacenado,mesAlmacenado,1)
var titulo = document.getElementsByTagName('span');
var mes = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];

titulo[0].textContent = mes[miFecha.getMonth()]+" DE "+miFecha.getFullYear();

var mesesPares = /(ENERO)|(MARZO)|(MAYO)|(JULIO)|(AGOSTO)|(OCTUBRE)|(DICIEMBRE)/;
var mesFebrero = /FEBRERO/;
var diasDelMes;

if(mesesPares.test(titulo[0].textContent)){
diasMes = 31;
}else if(mesFebrero.test(titulo[0].textContent)){
diasMes = 29;
}else{
diasMes = 30;
}

var celdas = document.getElementsByTagName('td');

for(var i=0; i<celdas.length+1; i++){
if(i<(miFecha.getDay()-1) || (i-(miFecha.getDay()-2))>diasMes){
celdas[i].textContent = "";
}else{
celdas[i].textContent = i-(miFecha.getDay()-2);
}
}

}

</script>
</head>
<body style="text-align: center;">
<h1>Calendario</h1>
<div id="central">
<table style="border: solid;">
<span style="text-align: center;"></span>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
</div>
</body>
</html>
Gracias.
« Última modificación: 27 de Marzo 2016, 21:49 por César Krall »
En línea

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Re:CU01162E Date en JavaScript
« Respuesta #1 en: 25 de Marzo 2016, 15:18 »
Y otra solución con mejor visualización y más opciones:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style>
div{
border: solid;
width: 400px;
height: 400px;
margin-left: 450px;
margin-top: 50px;
text-align: center;
}
table{
width: 300px;
font-size: 24px;
text-align: center;
margin-left: 50px;
margin-top: 25px;
}
</style>
<script type="text/javascript">

window.onload = function(){

var rellenarDias = ["Lu","Ma","Mi","Ju","Vi","Sa","Do"];
var diasSemana = document.getElementsByTagName('th');

for(var i=0;i<diasSemana.length;i++){
diasSemana[i].textContent = rellenarDias[i];
}

var fechaAlmacenada = new Date();

var pregunta = confirm('Quieres ver un mes en concreto?-"Aceptar"\nO quieres ver el mes actual?-"Cancelar"');

if(pregunta == true){
var anyoAlmacenado = prompt('Entra el año');
var mesAlmacenado = prompt('Entra el mes en cifras');
mesAlmacenado = mesAlmacenado-1;
}else{
mesAlmacenado = fechaAlmacenada.getMonth();
anyoAlmacenado = fechaAlmacenada.getFullYear();
}

var miFecha = new Date(anyoAlmacenado,mesAlmacenado,1)
var titulo = document.getElementsByTagName('span');
var mes = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];

titulo[0].textContent = mes[miFecha.getMonth()]+" DE "+miFecha.getFullYear();

var mesesPares = /(ENERO)|(MARZO)|(MAYO)|(JULIO)|(AGOSTO)|(OCTUBRE)|(DICIEMBRE)/;
var mesFebrero = /FEBRERO/;
var diasDelMes;

if(mesesPares.test(titulo[0].textContent)){
diasMes = 31;
}else if(mesFebrero.test(titulo[0].textContent)){
diasMes = 29;
}else{
diasMes = 30;
}

var celdas = document.getElementsByTagName('td');

var primerDia = miFecha.getDay();

if(primerDia==0){
primerDia = 7
}

for(var i=0; i<celdas.length; i++){
if(i<primerDia-1 || (i-(primerDia-2))>diasMes){
celdas[i].textContent = "";
}else{
celdas[i].textContent = i-(primerDia-2);
if(mesAlmacenado == fechaAlmacenada.getMonth() && anyoAlmacenado == fechaAlmacenada.getFullYear()){
celdas[fechaAlmacenada.getDate()].style.backgroundColor = "red";
}
}
}

}

</script>
</head>
<body style="text-align: center;">
<h1>Candario</h1>
<div id="central">
<table>
<span style="text-align: center;"></span>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
</div>
</body>
</html>
Gracias.
« Última modificación: 25 de Marzo 2016, 18:35 por dimiste »
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CU01162E Date en JavaScript
« Respuesta #2 en: 26 de Marzo 2016, 01:08 »
Hola dimiste.

¿Que pasa si febrero tiene 28 días?

 ;D
En línea

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Re:CU01162E Date en JavaScript
« Respuesta #3 en: 26 de Marzo 2016, 13:41 »
Ups, es verdad, jejeje. Se me había olvidado.

Añadí esto en el código:

Código: [Seleccionar]
if(mesesPares.test(titulo[0].textContent)){
diasMes = 31;
}else if(mesFebrero.test(titulo[0].textContent)){
if(anyoAlmacenado%4 == 0){
diasMes = 29;
}else{
diasMes = 28;
}
}else{
diasMes = 30;
}
De modo que todo el código quedará:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style>
div{
border: solid;
width: 400px;
height: 400px;
margin-left: 450px;
margin-top: 50px;
text-align: center;
}
table{
width: 300px;
font-size: 24px;
text-align: center;
margin-left: 50px;
margin-top: 25px;
}
</style>
<script type="text/javascript">

window.onload = function(){

var rellenarDias = ["Lu","Ma","Mi","Ju","Vi","Sa","Do"];
var diasSemana = document.getElementsByTagName('th');

for(var i=0;i<diasSemana.length;i++){
diasSemana[i].textContent = rellenarDias[i];
}

var fechaAlmacenada = new Date();

var pregunta = confirm('Quieres ver un mes en concreto?-"Aceptar"\nO quieres ver el mes actual?-"Cancelar"');

if(pregunta == true){
var anyoAlmacenado = prompt('Entra el año');
var mesAlmacenado = prompt('Entra el mes en cifras');
mesAlmacenado = mesAlmacenado-1;
}else{
mesAlmacenado = fechaAlmacenada.getMonth();
anyoAlmacenado = fechaAlmacenada.getFullYear();
}

var miFecha = new Date(anyoAlmacenado,mesAlmacenado,1)
var titulo = document.getElementsByTagName('span');
var mes = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];

titulo[0].textContent = mes[miFecha.getMonth()]+" DE "+miFecha.getFullYear();

var mesesPares = /(ENERO)|(MARZO)|(MAYO)|(JULIO)|(AGOSTO)|(OCTUBRE)|(DICIEMBRE)/;
var mesFebrero = /FEBRERO/;
var diasDelMes;

if(mesesPares.test(titulo[0].textContent)){
diasMes = 31;
}else if(mesFebrero.test(titulo[0].textContent)){
if(anyoAlmacenado%4 == 0){
diasMes = 29;
}else{
diasMes = 28;
}
}else{
diasMes = 30;
}

var celdas = document.getElementsByTagName('td');

var primerDia = miFecha.getDay();

if(primerDia==0){
primerDia = 7
}

for(var i=0; i<celdas.length; i++){
if(i<primerDia-1 || (i-(primerDia-2))>diasMes){
celdas[i].textContent = "";
}else{
celdas[i].textContent = i-(primerDia-2);
if(mesAlmacenado == fechaAlmacenada.getMonth() && anyoAlmacenado == fechaAlmacenada.getFullYear()){
celdas[fechaAlmacenada.getDate()].style.backgroundColor = "red";
}
}
}

}

</script>
</head>
<body style="text-align: center;">
<h1>Candario</h1>
<div id="central">
<table>
<span style="text-align: center;"></span>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
</div>
</body>
</html>
Gracias por corregir otro ejercicio más, Pedro :)

Saludos.
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Date JavaScript crear calendario del mes getMonth getFullYear código CU01162E
« Respuesta #4 en: 27 de Marzo 2016, 23:52 »
Ahora ya queda perfecto.

Saludos. ;D
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".