SECONDS in movement of a CLOCK

In order to do what you're trying to do, you need to understand a bit about what UTC means and how to work with those values.

In the case of your question, you do not make it clear if you are referring to Barcelona, ​​Spain or Barcelona, ​​Venezuela , therefore I will create both, so that the process is well understood.

First of all we must establish the time difference between UTC and the local time of each region.

Spain works in the time zone known as GMT+01:00, and Venezuela works in the time zone known as GMT-04:00.

This means that the time in Spain is 1 unit (hour) higher than UTC (old GMT) and the time in Venezuela is 4 units lower than UTC.

Therefore if the UTC time is let's say: 12:00:00 GMT, then:

• Spain:13:00:00 GMT+01:00
• Venezuela:08:00:00 GMT-04:00

The object Dateallows us to obtain the values ​​of hours, minutes and seconds, both local and UTC.

Let's look at an example:

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; }

Now, since we already have a way to obtain the UTC time and we also know the time difference of the country with respect to UTC, we can show a clock from any time zone, it is just a matter of calculating the value that said clock would have.

Sticking to the JS standard for the object Date, any time zone that is east (right) of UTC will be written as negative integer values. Therefore, Spain corresponds to -1.

Conversely, any time zone that is west (left) of UTC will be written with positive values. Therefore, Venezuela corresponds to 4.

Now, I am going to write a reusable method, which will receive as parameters an object from the DOM that will represent the clock (a particular object whose example is below), and also the value (integer type) of the time difference of the country that we want to use. for our watch.

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;
}

With this we have, however, a small problem in our method.

If we are at 23 hours UTC, the time in Spain will be 24, but a clock only goes from 0 to 23 hours, therefore 24 will not be a valid time.

If we are at 0 hours UTC, the time in Venezuela will be -4, which is also invalid.

To fix this we need to make a small correction to our method.

As they would say in Spain: that's cool , and as they would say in Venezuela: that's 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;
}

Let's see what happens here, if the UTC time is 0, then the calculated time for Venezuela is: 0 - 4 = -4. Therefore, when making the indicated correction we have that:

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

Which is correct, when UTC is 0, the time in Venezuela is 20 or, as it is known there , 8 at night .

On the other hand, if UTC is 23, then the calculated time for Spain is: 23 - (-1) = 23 + 1 = 24. When applying the indicated correction we have:

horas = 24 - 24 => horas = 0

Which is correct, since when in UTC it is 23 hours, in Spain it is 0 hours.

With all this we already have a way to calculate the time of any country using this peculiar method that writes the appropriate values ​​in a DOM object.

It is then necessary to update these values ​​every second (so that it behaves like an ordinary clock). For this we will use the method setInterval(). To which we will pass the function that updates the clock in the DOM, the time parameter in milliseconds (1 second = 1000 milliseconds) and the additional parameters for the execution of the function.

For example:

setInterval(showLocalTimeClock, 1000, clock, tz);

With this our function will be executed every second, resulting in a clock that varies every second from the moment the page is loaded, showing the local time of the country that is used as the time zone.

The following implementation uses a modified version to display both clocks (Spain and Venezuela), but builds on everything above:

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>

I hope this clears your doubt.

You can use this code, which does something similar. It works perfectly. In the body in the onload event it makes a function call. This function in turn calls itself with setInterval.

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

A greeting.

I put the complete code. A greeting, to copy and paste in an html file. Greetings.

<!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>