Aprendemos JavaScript: Calendario

Ver calendario en ventana emergente.
Este es el código HTML con el javascript:

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="author" content="Marco Biedermann y Ángel Puente">

<title>Calendario</title>
<link rel="stylesheet" href="css/style.css">
<script>
function calendario() {
var date = new Date();
weekday = ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"];
mesano = ["ENERO", "FEBRERO", "MARZO", "ABRIL", "MAYO", "JUNIO", "JULIO", "AGOSTO", "SEPTIEMBRE", "OCTUBRE", "NOVIEMBRE", "DICIEMBRE"];
document.getElementById('weekday').innerHTML = weekday[date.getDay()];
document.getElementById('day').innerHTML = date.getDate();
document.getElementById('mesano').innerHTML = mesano[date.getMonth()];
}
</script>
</head>
<body onload="calendario()">
<div class="container">
<div class="app">
<div class="app-calendar">
<div id="weekday">viernes</div>
<div id="day">11</div>
</div>

<p><div id="mesano">MARZO</div></p>
</div>

</div>

</body>
</html>

Esta es la hoja de estilos:

@charset "utf-8";
body {
background: #666666;
color: #f9f9f9;
font: 100%/1.5em "Droid Sans", sans-serif;
margin: 0;
}
p { margin: 0; }
.container {
height: 248px;
left: 50%;
margin: -124px 0 0 -100px;
position: absolute;
top: 50%;
width: 200px;
}
.app { text-align: center; }
.app-calendar {
height: 200px;
margin-bottom: 24px;
width: 200px;
}
#mesano{
font-size: 24px;
font-weight: bold;
text-shadow: 0 5px #15181f;
}
#weekday {
background: #d9383c;
border-radius: 35px 35px 0 0;
color: #f9f9f9;
font-size: 24px;
line-height: 56px;
position: relative;
text-transform: lowercase;
}
#day {
background: #f9f9f9;
border-radius: 0 0 35px 35px;
-webkit-box-shadow: 0 8px 0 #15181f;
box-shadow: 0 8px 0 #15181f;
color: #15181f;
font-size: 120px;
font-weight: bold;
height: 144px;
line-height: 144px;
}

viernes, 11 de marzo de 2016

Calendario

No hay comentarios:

Publicar un comentario