Mostrar Mensajes
1
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript pedir al usuario una fecha y construir calendario del mes CU01162E
« en: 07 de Septiembre 2017, 06:26 »
Esta es mi solucion para el ejercicio CU01162E del tutorial de programación web con JavaScript desde cero, muy interesante.
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Calentadario</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
font-family: sans-serif;
}
td{
border:1px solid gray;
}
caption{
border-bottom: 4px solid grey;
}
th{color: #8d0d0d;}
</style>
<script type="text/javascript">
window.onload = function () {
var cap = document.getElementsByTagName("caption");
var tds = document.getElementsByTagName("td");
var texto = document.getElementById("fe").value;
var fechaHoy = new Date(texto);
var cont = 2;
for (var j = 0; j < 42; j++) {
tds[j].style.backgroundColor = "transparent";
tds[j].textContent = "";
}
cap[0].textContent = "";
switch (fechaHoy.getUTCMonth()) {
case 0:
var mes = "Enero";
buscarMes(fechaHoy.getUTCMonth());
break;
case 1:
var mes = "Febrero";
buscarMes(fechaHoy.getUTCMonth());
break;
case 2:
var mes = "Marzo";
buscarMes(fechaHoy.getUTCMonth());
break;
case 3:
var mes = "Abril";
buscarMes(fechaHoy.getUTCMonth());
break;
case 4:
var mes = "Mayo";
buscarMes(fechaHoy.getUTCMonth());
break;
case 5:
var mes = "Junio";
buscarMes(fechaHoy.getUTCMonth());
break;
case 6:
var mes = "Julio";
buscarMes(fechaHoy.getUTCMonth());
break;
case 7:
var mes = "Agosto";
buscarMes(fechaHoy.getUTCMonth());
break;
case 8:
var mes = "Septiembre";
buscarMes(fechaHoy.getUTCMonth());
break;
case 9:
var mes = "Octubre";
buscarMes(fechaHoy.getUTCMonth());
break;
case 10:
var mes = "Noviembre";
buscarMes(fechaHoy.getUTCMonth());
break;
case 11:
var mes = "Diciembre";
buscarMes(fechaHoy.getUTCMonth());
break;
default:
alert("Fecha ingresada no valida !!!");
break;
}
function buscarMes(mess) {
if (mess == 1) {
var fecha = new Date(fechaHoy.getFullYear() + '-' + (mess + 1) + '-01');
var primero = fecha.getUTCDay();
tds[primero].textContent = "1";
if (fechaHoy.getFullYear() % 4 == 0 && fechaHoy.getFullYear() % 100 != 0 || fechaHoy.getFullYear() % 400 == 0) {
for (var i = 1; i < 29; i++) {
tds[primero + i].textContent = cont;
cont++;
}
} else {
for (var i = 1; i < 28; i++) {
tds[primero + i].textContent = cont;
cont++;
}
}
} else if (mess == 3 || mess == 5 || mess == 8 || mess == 10) {
var fecha = new Date(fechaHoy.getFullYear() + '-' + (mess + 1) + '-01');
var primero = fecha.getUTCDay();
tds[primero].textContent = "1";
for (var i = 1; i < 30; i++) {
tds[primero + i].textContent = cont;
cont++;
}
} else {
var fecha = new Date(fechaHoy.getFullYear() + '-' + (mess + 1) + '-01');
var primero = fecha.getUTCDay();
tds[primero].textContent = "1";
for (var i = 1; i < 31; i++) {
tds[primero + i].textContent = cont;
cont++;
}
}
cap[0].textContent = mes + " de " + fechaHoy.getFullYear();
tds[fechaHoy.getDate() + primero].style.backgroundColor = "skyblue";
}
}
</script>
</head>
<body>
<h1>Calendario</h1>
<label for="fe">Fecha:</label>
<input type="text" id="fe" name="fe" placeholder="AA-MM-DD"><br><br>
<input type="button" onclick="window.onload()" value="Buscar">
<div style="width: 300px; height: 280px; margin: 100px;background-color: rgba(97,96,86,.6);border-radius: 5px; box-shadow: 5px 5px 10px gray;text-align: center;">
<table style="width: 300px;font-size: 24px;">
<caption></caption>
<tbody>
<tr>
<th>Do</th><th>Lu</th><th>Ma</th><th>Mi</th><th>Ju</th><th>Vi</th><th>Sá</th>
</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>
</tbody>
</table>
</div>
</body>
</html>
RSS