2

Me gustaría poner en mi sitio web un reloj con la hora a tiempo real en Barcelona. He conseguido que funcione un código dentro un de una caja de texto (sin usar CSS), pero sólo muestra la hora/minutos/segundos en el momento en el que entras en la página, y los segundos no avanzan. He visto que hay códigos para refrescar los segundos cada segundo, pero no sé de qué manera integrarlos en mi código para que funcione. Muchas gracias

<p style="text-align: left;”>:BARCELONA<span id="datetime"></span><script>
var dt = new Date(); document.getElementById("datetime").innerHTML = (("0"+dt.getHours()).slice(-2)) +":"+ (("0"+dt.getMinutes()).slice(-2)) +":"+ (("0"+dt.getSeconds()).slice(-2));
</script></p>

3 respuestas 3

1

Para poder hacer lo que intentas, debes entender un poco lo que significa UTC y cómo trabajar con dichos valores.

En el caso de tu pregunta, no dejas claro si te refieres a Barcelona, España o a Barcelona, Venezuela, por lo tanto crearé ambos, para que se entienda bien el proceso.

En primer lugar debemos establecer la diferencia de hora entre UTC y la hora local de cada región.

España se maneja en la zona horaria conocida como GMT+01:00, y Venezuela se maneja con la zona horaria conocida como GMT-04:00.

Esto significa que la hora de España es 1 unidad (hora) superior a la hora UTC (antigua GMT) y la hora de Venezuela es 4 unidades inferior a la hora UTC.

Por lo tanto si la hora UTC es digamos: 12:00:00 GMT, entonces:

  • España: 13:00:00 GMT+01:00
  • Venezuela: 08:00:00 GMT-04:00

El objeto Date, nos permite obtener los valores de hora, minutos y segundos, tanto local como UTC.

Veamos un ejemplo:

let date = new Date();
const horaLocal = date.getHours();
const horaUTC = date.getUTCHours();
// dependiendo de la zona horaria local se imprimirán resultados diferentes
// si la zona horaria local coincide con la zona UTC, los valores serán iguales
console.log(`horaLocal: ${horaLocal}`);
console.log(`horaUTC: ${horaUTC}`);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Ahora, como ya tenemos una forma de obtener la hora UTC y además sabemos la diferencia horaria del país con respecto a UTC, podemos mostrar un reloj de cualquier zona horaria, es solo cuestión de calcular el valor que tendría dicho reloj.

Apegandonos al estándar que maneja JS para el objeto Date, toda zona horaria que se encuentre al este (derecha) de UTC se escribirá con valores enteros negativos. Por lo tanto a España le corresponde -1.

Por el contrario, toda zona horaria que se encuentre al oeste (izquierda) de UTC se escribirá con valores positivos. Por lo tanto a Venezuela le corresponde 4.

Ahora, voy a escribir un método rehusable, el cual recibirá como parámetros un objeto del DOM que representará el reloj (un objeto particular cuyo ejemplo está más abajo), y además el valor (tipo entero) de la diferencia horaria del país que deseamos usar para nuestro reloj.

const showLocalTimeClock = (clock, tz) => {
  const date = new Date(); // obtenemos la fecha del sistema
  let hora = date.getUTCHours() - tz; // se resta la zona horaria
  hora = hora < 10 ? `0${hora}`: hora; // si la hora es menor que 10 convertimos en una cadena con un cero delante.
  let minutos = date.getUTCMinutes();
  minutos = minutos < 10 ? `0${minutos} : minutos;
  let segundos = date.getUTCSeconds();
  // usamos nuestro elemento clock
  clock.getElementsByTagName('horas')[0].innerHTML = horas;
  clock.getElementsByTagName('minutos')[0].innerHTML = minutos;
  clock.getElementsByTagName('segundos')[0].innerHTML = segundos;
}

Con esto tenemos, sin embargo, hay un pequeño problema en nuestro método.

Si estamos en 23 horas UTC, la hora de España será 24, pero un reloj sólo va de 0 a 23 horas, por lo tanto 24 no será una hora válida.

Si estamos en 0 horas UTC, la hora de Venezuela será -4, lo cual tampoco es válido.

Para arreglar esto debemos hacer una pequeña corrección en nuestro método.

Como dirían en España: eso está chupado, y como dirían en Venezuela: eso es papayita.

// para el caso de horas negativas
if(horas < 0) {
  horas = 24 + horas;
}

//para el caso de horas mayores a 23
if(horas > 23) {
  horas = 24 - horas;
}

Veamos lo que sucede aquí, si la hora UTC es 0, entonces la hora calculada para Venezuela es: 0 - 4 = -4. Por lo tanto al hacer la corrección indicada tenemos que:

horas = 24 + (-4) => horas = 24 - 4 => horas = 20

Lo cual es correcto, cuando UTC es 0 la hora de Venezuela es 20 o como se conoce allá las 8 de la noche.

Por otro lado, si UTC es 23, entonces la hora calculada para España es: 23 - (-1) = 23 + 1 = 24. Al aplicar la corrección indicada tenemos que:

horas = 24 - 24 => horas = 0

Lo cual es correcto, ya que cuando en UTC son las 23 horas, en España son las 0 horas.

Con todo esto ya tenemos una forma de calcular la hora de cualquier país usando este método peculiar que escribe en un objeto del DOM los valores adecuados.

Falta entonces actualizar estos valores a cada segundo (para que se comporte como un reloj común y corriente). Para ello usaremos el método setInterval(). Al cual le pasaremos la función que actualiza el reloj en el DOM, el parámetro de tiempo en milisegundos (1 segundo = 1000 milisegundos) y los parámetros adicionales para la ejecución de la función.

Por ejemplo:

setInterval(showLocalTimeClock, 1000, clock, tz);

Con esto nuestra función se ejecutará cada segundo, dando como resultado un reloj que varía cada segundo desde el momento que se carga la página, mostrando la hora local del país que se usa como zona horaria.

La siguiente implementación usa una versión modificada para mostrar ambos relojes (España y Venezuela), pero se basa en todo lo expuesto anteriormente:

const tzES = -1;
const tzVE = 4;

const clockES = document.getElementById('clockES');
const clockVE = document.getElementById('clockVE');


const showLocalTimeClock = (clock, tz) => {
  const date = new Date(); //<- captura la fecha y horas actuales  
  
  let horas = date.getUTCHours() - tz;
  if(horas < 0) {
    horas = 24 + horas;
  }
  if(horas > 23) {
    horas = horas - 24;
  }
  horas = horas < 10 ? `0${horas}` : horas;
  
  let minutos = date.getUTCMinutes();
  minutos = minutos < 10 ? `0${minutos}` : minutos;
  
  let segundos = date.getUTCSeconds();
  segundos = segundos < 10 ? `0${segundos}` : segundos;
  
  clock.getElementsByTagName('horas')[0].innerHTML = horas;
  clock.getElementsByTagName('minutos')[0].innerHTML = minutos;
  clock.getElementsByTagName('segundos')[0].innerHTML = segundos;
}

const updateBothClocks = (clock1, clock2, tz1, tz2) => {
  showLocalTimeClock(clock1, tz1);
  showLocalTimeClock(clock2, tz2);
}

//ejecutamos una primera vez para mostrar el reloj al inicio
updateBothClocks(clockES, clockVE, tzES, tzVE);

setInterval(updateBothClocks, 1000, clockES, clockVE, tzES, tzVE);
.container {
  text-align: center;
}
.values {
  display: inline-flex;
  padding: 1rem;
  border: solid 2px blue;
  border-radius: 10% / 50%;
}
<div class="container">
  <div id="clockES">
    <div class="title">
      <h3>Hora en Barcelona - España</h3>
    </div>
    <horas class="values"></horas><span> :</span>
    <minutos class="values"></minutos><span> :</span>
    <segundos class="values"></segundos>
  </div>
  <div id="clockVE">
    <div class="title">
      <h3>Hora en Barcelona - Venezuela</h3>
    </div>
    <horas class="values"></horas><span> :</span>
    <minutos class="values"></minutos><span> :</span>
    <segundos class="values"></segundos>
  </div>
</div>

Espero que esto aclare tu duda.

1
  • Muchísimas gracias!
    – user149809
    el 22 nov. 2019 a las 13:54
0

Puedes utilizar este código, que hace algo parecido. Funciona perfectamente. En el body en el evento onload hace una llamad a una función. Esta función a su vez se llama a si misma con setInterval.

https://stackoverflow.com/a/53383833/5903042

Un Saludo.

4
  • Muchas gracias por el link. He intentado pegar el código pero no funciona (o no sé cómo hacerlo). El código que he puesto arriba sí, pero los segundos no avanzan. Me podríais ayudar a editar mi código? Un saludo y gracias
    – user149809
    el 20 nov. 2019 a las 10:59
  • Creo que tienes un problema añadido, la hora que defines es la hora del cliente, no la de Barcelona (como intentas representar) por lo que necesitas obtener la hora de Barcelona durante la carga de la página, para luego mediante javascript se actualice en cada momento. el 20 nov. 2019 a las 11:54
  • Del enlace mostrado, extrae la información necesaria para responder la pregunta, de tal manera que tu respuesta tenga información relevante :)
    – fredyfx
    el 20 nov. 2019 a las 21:55
  • Pongo el código completo para copiar en un fichero html.
    – Antonios
    el 21 nov. 2019 a las 11:21
0

Pongo el código completo. Un saludo, para copiar y pegar en un fichero html. Saludos.

<!DOCTYPE html>
<html>
<head>
    <style>

    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
    <div id="time"><div>
    <script type="text/javascript">
        var dayArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

function getTime() {
  var today = new Date(),
      h = today.getHours(),
      m = today.getMinutes().toString().padStart(2, '0'),
      s = today.getSeconds().toString().padStart(2, '0'),
      d = dayArray[today.getDay()],
      mo = monthArray[today.getMonth()],
      y = today.getFullYear();

  document.getElementById('time').innerHTML = 
  `<br>` +
  `<h1 class='large'>${h}:${m}:${s}</h1>&nbsp;` +
  `<span class='dark'>${d},</span>&nbsp;` +
  `<span class='dark'>${mo}</span>&nbsp;` + 
  `<span class='dark'>${y}</span>`;

};

setInterval (function() {
  getTime();
}, 1000);
    </script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.