A continuacin, algunas de las funciones de Javascript que se pueden
emplear para mostrar la fecha y hora, cada una devuelve parmetros
diferentes pero se pueden combinar para crear el resultado que se desee.
El objeto Date es usado para ejecutar mediante las diferentes funciones
cualquiera de los parmetros necesarios.
Las funciones ms utilizadas son las siguientes:
getDate() Devuelve el dia del mes (entre el 1 y el 31)
getDay() Devuelve el dia de la semana (entre el 0 y el 6)
getMonth() Devuelve el mes (entre el 0 y el 11)
getFullYear() Devuelve el ao (en formato de 4 digitos)
getHours() Devuelve la hora (entre el 0 y el 24)
getMinutes() Devuelve los minutos (desde 0 a 59)
getSeconds() Devuelve los segundos (desde 0 a 59)
getTime()
Devuelve el nmero de milisegundos desde el 1ro de Enero
de 1970
getTimezoneOffset()
Devuelve la diferencia de horario en minutos entre la hora
local y GMT (Meridiano de Greenwich)
getUTCHours()
Devuelve la hora de acuerdo a UTC (Tiempo Universal
Coordinado)
Como usar las funciones de Javascript?
Para crear una funcin es necesario primero establecer una variable con new
Date() para definir la fecha y hora actual, a continuacin se agrega la funcin
a ejecutar en cada caso.
En caso de usar solamente Date se mostrar el resultado de la variable en
bruto, es decir la secuencia del da de la semana, el mes, el da, el ao, la
hora GMT y el huso horario, todo en ingls.
Prubalo en el siguiente botn:
Esto no resulta de utilidad, es necesario agregar las funciones por separado y
combinarlas para lograr un resultado que valga la pena.
Ejemplos prcticos del uso de funciones para obtener la
fecha y hora
Algunos ejemplos escribiendo con [Link] el resultado de la funcin
en la pgina.
De la siguiente forma con getDate() se escribe el da del mes:
<script type="text/javascript">
var d = new Date();
[Link]([Link]());
</script>
Para escribir la hora utiliza getHours():
<script type="text/javascript">
var d = new Date();
[Link]([Link]());
</script>
As sucesivamente se puede usar con cada funcin.
Para usar varias encadenadas hazlo de la siguiente forma:
Al usarlo se mostrar:
Fecha: 7
Dia de la semana: 4
Mes (0 al 11): 7
Ao: 2014
Hora: 16
Hora UTC: 21
Minutos: 53
Segundos: 10
Para mostrar la diferencia en minutos con la zona horaria de Greenwich
utilizagetTimezoneOffset():
<script type="text/javascript">
var d = new Date();
[Link]('<br>Diferencia de GTM en minutos:
'+[Link]());
</script>
En todos los casos la funcin new Date() como primer paso determina la
hora y fecha actual de acuerdo a lo que indica Windows, as como la zona
horaria.
Todos los parmetros de Javascript son globales, o sea estndar para todos
los equipos e idiomas, por lo que algunos de ellos necesitan ser convertidos
antes de mostrarlos, por ejemplo:
La funcin getDay() devuelve el da de la semana, pero en un formato entre
el 0 y el 6, donde el 0 corresponde al domingo.
La funcin getMonth() devuelve el mes comprendido entre el 0 y el 11, donde
0 corresponde a Enero.
Para mostrar el resultado de esas y otras funciones correctamente, se
pueden emplear algunos trucos.
Trucos para convertir el resultado de funciones
En el siguiente ejemplo se traducen los das de la semana a los nombres es
espaol creando un array.
<script type="text/javascript">
var d=new Date();
var dia=new Array(7);
dia[0]="Domingo";
dia[1]="Lunes";
dia[2]="Martes";
dia[3]="Miercoles";
dia[4]="Jueves";
dia[5]="Viernes";
dia[6]="Sabado";
[Link]("Hoy es: " + dia[[Link]()]);
</script>
Al usarlo se mostrar:
Hoy es: Jueves
En el caso del mes, en que la funcion getMonth() siempre devuelve el
resultado con un atraso de una cifra, se puede utilizar:
<script type="text/javascript">
var hoy = new Date();
var m = [Link]() + 1;
var mes = (m < 10) ? '0' + m : m;
[Link]('Este mes es el nmero: '+mes);
</script>
Si deseas que se muestre el nombre del mes entonces utiliza:
<script type="text/javascript">
var mm=new Date();
var m2 = [Link]() + 1;
var mesok = (m2 < 10) ? '0' + m2 : m2;
var mesok=new Array(12);
mesok[0]="Enero";
mesok[1]="Febrero";
mesok[2]="Marzo";
mesok[3]="Abril";
mesok[4]="Mayo";
mesok[5]="Junio";
mesok[6]="Julio";
mesok[7]="Agosto";
mesok[8]="Septiembre";
mesok[9]="Octubre";
mesok[10]="Noviembre";
mesok[11]="Diciembre";
[Link]("Este mes es: " + mesok[[Link]()]);
</script>
<script type="text/javascript">
function sbClock() {
var DateString=(new Date()).toString();
[Link]=[Link](0,3+[Link](':'));
setTimeout("sbClock()",200);}
[Link]=function(){sbClock();}
</script>
Estas funciones se utilizan sobre todo para realizar animaciones o por ejemplo para redireccionar una pgina
transcurridos x segundos.
Por ejemplo, si quisiramos programar un reloj en la barra de estado la funcin ms idnea sera setInterval.
Teniendo una funcin llamada "reloj()" que imprime en la barra de estado la hora actual utilizaramos la funcin
setInterval de esta forma:
setInterval("reloj()",1000);
El primer parmetro es la funcin a ejecutar, el segundo es el intervalo en milisegundos, es decir, 1000 milisegundos
= 1 segundo. De esta forma, cada segundo se ejecutar la funcin "reloj()" y por lo tanto se mostrar un reloj con la
hora actual que ir cambiando segundo a segundo. La funcin reloj() podra ser esta:
function reloj() {
var fObj = new Date() ;
var horas = [Link]() ;
var minutos = [Link]() ;
var segundos = [Link]() ;
if (horas <= 9) horas = "0" + horas;
if (minutos <= 9) minutos = "0" + minutos;
if (segundos <= 9) segundos = "0" + segundos;
[Link] = horas+":"+minutos+":"+segundos;
}
La otra funcin, setTimeout, tiene un uso muy similar, pero como ya hemos dicho, slo se ejecuta una vez y
podemos aprovechar esta caracterstica para redireccionar una pgina. Por ejemplo:
setTimeout("[Link]='[Link]
Con este cdigo en 5s el usuario sera redireccionado a Google.
Adems estas funciones devuelven un identificador que nos permitirn neutralizarlas con sus respectivas funciones
clearTimeout y clearInterval. Es decir:
var id = setInterval("reloj()",1000);
setTimeout("clearInterval("+id+")",15000);
Con este ejemplo ejecutamos nuestro reloj durante 15 segundos.
En definitiva, sencillas funciones que llegan a resultar muy tiles.
<script type="text/javascript">
function ActivarReloj(){
//Obteniendo datos del tiempo
var laHora = new Date();
var horario = [Link]();
var minutero = [Link]();
var segundero = [Link]();
if(minutero<10)
minutero = "0" + minutero;
if(segundero<10)
segundero = "0" + segundero;
//escribiendo sobre el campo de texto la hora actual
[Link]('sonLas').value = horario+":"+minu
tero+":"+segundero;
//Desactivando el boton 'Activar Reloj'
[Link]('botonActivar').disabled=true;
//Actualizando la hora cada 1 segundo
ahoraSonLas = setTimeout(ActivarReloj,1000);
}
function DetenerReloj(){
// Deteniendo el setTimeout
clearTimeout(ahoraSonLas);
// Volviendo el boton 'Activar Reloj' a la normalidad
[Link]('botonActivar').disabled=false;
}
</script>
</br>
<input type="text" id="sonLas"/></br>
<input type="button" onclick="ActivarReloj()" id="botonActivar" va
lue="Activar Reloj"/>
<input type="button" onclick="DetenerReloj()" value="Detener Reloj
"/>
Ejemplo : Se cambia la imagen cada segundo.
<script type="text/javascript">
function iniciar(indice){
//desactivando y activando los botones
[Link]('miBotonIni').disabled = true;
[Link]('miBotonPar').disabled = false;
//Creando el array de nombres de imagenes
var misImagenes = ['[Link]','[Link]','[Link]
','[Link]'];
//Si est en el ltimo valor del array vuelve al comienzo
indice = (indice!=3)?(indice+1):0;
[Link]('miImagen').src = misImagenes[indi
ce];
//Utilizando setTimeout enviando una funcin con parametro
s
tiempo = setTimeout(function(){iniciar(indice)},1000);
}
function parar(){
//activando y desactivando los botones
[Link]('miBotonIni').disabled = false;
[Link]('miBotonPar').disabled = true;
//deteniedo el temporizador
clearTimeout(tiempo);
}
</script>
<input id="miBotonIni" type="button" value="Iniciar !" onclick="in
iciar(2)">
<input id="miBotonPar" type="button" value="Parar !" onclick="para
r()" disabled>
<br><img id="miImagen" src="[Link]">