Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Dimitar Stefanov en 25 de Marzo 2016, 02:20
-
Buenas noches.
Pongo una solución del ejercicio CU01162E del curso JavaScript desde cero.
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:
<!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.
-
Y otra solución con mejor visualización y más opciones:
<!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.
-
Hola dimiste.
¿Que pasa si febrero tiene 28 días?
;D
-
Ups, es verdad, jejeje. Se me había olvidado.
Añadí esto en el código:
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á:
<!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.
-
Ahora ya queda perfecto.
Saludos. ;D