lunes, 15 de febrero de 2016

Fechas y horas

El objeto Date permite trabajar con fechas (años, meses, días, horas, minutos, segundos, milisegundos).
Del contenido del capítulo JS Dates W3Schools.

Ejercicio 1. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Fechas y Horas</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Mostrando fecha y hora.</h2>
<button type="button" onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
function myFunction(){
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>

Ejercicio 2.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Fechas y Horas</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Creando objetos <i>Date()</i>.</h2>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d; // es lo mismo que llamar directamente a Date();
</script>
</body>
</html>

Ejercicio 3. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Fechas y Horas</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Usando <i>new Date(date string)</i>, creamos un nuevo objeto <i>Date</i> con la fecha y hora especificada.</h2>
<p id="demo"></p>
<script>
var d = new Date("October 13, 2014 11:13:00");
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>

Ejercicio 4. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Fechas y Horas</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Usando <i>new Date(number)</i>, creamos un nuevo objeto <i>Date</i> desde el tiempo 0 más el number.</h2>
<p>El tiempo cero es el 1 de enero de 1970 a las 00:00:00 UTC. El número está en milisegundos.</p>
<button type="button" onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
function myFunction(){
var d = new Date(86400000);
document.getElementById("demo").innerHTML = d;
}
</script>
</body>
</html>

Ejercicio 5.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Fechas y Horas</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Usando <i>new Date(7 números)</i>, creamos un nuevo objeto Date con el día y hora especificado.</h2>
<p>Los siete números especifican: año, mes, día, hora, minuto, segundo y milisegundo en este orden</p>
<p>El contador de los meses comienza en cero. Enero es el 0, febrero el 1, marzo el 2,...</p>
<button type="button" onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
function myFunction(){
var d = new Date(99,5,24,11,33,30,0); //el año es 199. A partir del 2000 se escribe todo el año entero: 2016 p.e.
document.getElementById("demo").innerHTML = d;
}
</script>
</body>
</html>

Ejercicio 6. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Fechas y Horas</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Una variante permite escribir sólo los tres primeros números.</h2>
<p>Escribimos: año, mes y día.</p>
<p id="demo"></p>
<script>
var d = new Date(99,5,24);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>

Ejercicio 7. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Fechas y Horas</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Cuando mostramos un objeto date en HTML, es convertido automátiamente en string con el método <i>toString()</i>.</h2>
<button type="button" onclick="myFunction()">Púlsame</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function myFunction(){
d = new Date();
document.getElementById("demo1").innerHTML = d;
document.getElementById("demo2").innerHTML = d.toString();
}
</script>
</body>
</html>

Ejercicio 8.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Fechas y Horas</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>toUTCString()</i> convierte la date al string UTC (un estándar de fecha y hora).</h2>
<button type="button" onclick="myFunction()">Púlsame</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function myFunction(){
var d = new Date();
document.getElementById("demo1").innerHTML = d;
document.getElementById("demo2").innerHTML = d.toUTCString();
}
</script>
</body>
</html>

Ejercicio 9.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Fechas y Horas</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>toDateString()</i> convierte una fecha en un formato más legible.</h2>
<button type="button" onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
function myFunction(){
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
}
</script>
</body>
</html>
Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)