Cómo mostrar la hora local en diferentes ubicaciones usando JavaScript
Como seguramente ya sabes, JavaScript facilita la tarea de mostrar la hora local en una página web, leyendo directamente el reloj del cliente. Pero, ¿qué sucede si quieres mostrar la hora en una ubicación diferente, por ejemplo, si tu base está en otro país y quieres ver la hora "en casa" en lugar de la hora local?
Para lograr esto, es necesario realizar diversos cálculos temporales y convertir la hora local a la hora de destino. Este documento explica cómo realizar estos cálculos.
Paso 1: Obtener la hora local actual
El primer paso es obtener la hora local actual. En JavaScript, esto se logra fácilmente inicializando un objeto Date() sin argumentos:
// crear objeto Date para la ubicación actual
d = new Date();
Expresa esta hora local como el número de milisegundos transcurridos desde el 1 de enero de 1970, mediante el método getTime() del objeto Date():
// convertir a milisegundos desde el 1 de enero de 1970
horaLocal = d.getTime();
Cómo convertir valores de fecha y hora en cadenas formateadasPaso 2: Obtener el desfase horario de la zona local
A continuación, encuentra el desfase horario de la zona local utilizando el método getTimezoneOffset() del objeto Date(). Por defecto, este método devuelve el desfase horario en minutos, así que convierte este valor a milisegundos para facilitar su manipulación:
// obtener el desfase horario local y convertirlo a milisegundos
desfaseLocal = d.getTimezoneOffset() * 60000;
Ten en cuenta que un valor negativo devuelto por getTimezoneOffset() indica que la ubicación actual está por delante de UTC, mientras que un valor positivo indica que la ubicación está por detrás de UTC.
Paso 3: Obtener la hora UTC actual
Obtén la hora UTC actual sumando el desfase horario local a la hora local:
// obtener la hora UTC en milisegundos
utc = horaLocal + desfaseLocal;
En este punto, la variable utc contiene la hora UTC actual. Sin embargo, este valor de tiempo se expresa como el número de milisegundos transcurridos desde el 1 de enero de 1970. Déjalo así por el momento, ya que aún hay algunos cálculos más por realizar.
Cómo utilizar nslookup para probar y solucionar problemas de resolución de DNS en WindowsPaso 4: Obtener la hora local en la ciudad de destino
Una vez que hayas obtenido la hora UTC, obtén el desfase horario UTC de la ciudad de destino en horas, conviértelo a milisegundos y añádelo a la hora UTC:
// obtener y añadir el desfase horario UTC de la ciudad de destino
// por ejemplo, Bombay
// que tiene un desfase horario de UTC + 5.5 horas
desfaseDestino = 5.5;
bombay = utc + (3600000 * desfaseDestino);
En este punto, la variable bombay contiene la hora local en la ciudad de Bombay, India. Esta hora local se expresa como el número de milisegundos transcurridos desde el 1 de enero de 1970. Obviamente, esto no es muy legible, así que necesitamos realizar algunos cálculos más.
Paso 5: Mostrar la hora local como una cadena legible
Cambia el valor de tiempo calculado en el paso anterior a una cadena de fecha/hora legible mediante la inicialización de un nuevo objeto Date() con ese valor y llamando al método toLocaleString() del objeto:
// convertir el valor de milisegundos a una cadena de fecha
nd = new Date(bombay);
document.writeln("La hora en Bombay es " + nd.toLocaleString() + "
");
¡Y listo!
Proceso de cambio de alcance: cómo gestionar los cambios en un proyectoCompleto
Una vez que entiendas los pasos anteriores, echa un vistazo al siguiente script (Listado A), que los une a través de una función calcTime() definida por el usuario para realizar todos estos cálculos y devolver un valor de tiempo:
Listado A
<html>
<head>
<script language="JavaScript">
// función para calcular la hora local
// en una ciudad diferente
// dada la diferencia horaria UTC de la ciudad
function calcTime(ciudad, desfase) {
// crear objeto Date para la ubicación actual
d = new Date();
// convertir a milisegundos
// añadir el desfase horario local
// obtener la hora UTC en milisegundos
utc = d.getTime() + (d.getTimezoneOffset() * 60000);
// crear nuevo objeto Date para la ciudad diferente
// usando el desfase horario proporcionado
nd = new Date(utc + (3600000 * desfase));
// devolver la hora como una cadena
return "La hora local en " + ciudad + " es " + nd.toLocaleString();
}
// obtener la hora de Bombay
alert(calcTime('Bombay', '+5.5'));
// obtener la hora de Singapur
alert(calcTime('Singapur', '+8'));
// obtener la hora de Londres
alert(calcTime('Londres', '+1'));
</script>
</head>
<body>
</body>
</html>Aquí, la función calcTime() acepta el nombre de una ciudad y su desfase horario UTC (en horas). Luego realiza internamente todos los cálculos descritos anteriormente y devuelve una cadena que contiene la hora local en la ciudad indicada.
A continuación, se muestra una muestra de la salida del script en el Listado A:
La hora local en Bombay es lunes 01 de agosto de 2005 16:43:51
La hora local en Singapur es lunes 01 de agosto de 2005 19:13:51
La hora local en Londres es lunes 01 de agosto de 2005 12:13:51
Esperemos que este script te ahorre algo de tiempo la próxima vez que te sientes a programar cálculos de zonas horarias en tus páginas web. ¡Disfrútalo!
Tipos de datos en C#: Características y especificaciones para desarrolladoresEn Newsmatic nos especializamos en tecnología de vanguardia, contamos con los artículos mas novedosos sobre Desarrollo, allí encontraras muchos artículos similares a Cómo mostrar la hora local en diferentes ubicaciones usando JavaScript , tenemos lo ultimo en tecnología 2023.
Artículos Relacionados