Как настроить отображение времени на странице в зависимости от часового пояса пользователя на JS?

Question

Нужно написать код на JS, который будет проверять часовой пояс пользователя, и если он не будет московским, то отображать московское время. Например:

Пользователь А живёт в московском часовом поясе (UTC +3), поэтому на сайте время для не отображается.
Пользователь Б живёт в Уфе, часовой пояс (UTC +5, +2 МСК), поэтому на сайте для него показывается московское время. Вот нерабочая заготовка кода:

function addZero(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
time = new Date(Date.now());
var timezone = time.getTimezoneOffset()/60
var mosTime = h + 3
if (timezone != mosTime) {
      function getMosTime(){
            var time, h, m;
            h = time.getUTCHours();
            m = addZero(time.getUTCMinutes());
            return (mosTime) + '<span>:</span>' + m;
        }
        function setTimer(){
            time.innerHTML = getMosTime();
        }
        setInterval(setTimer, 1000);

Пожалуйста, помогите найти и исправить ошибку!

Answer 1

в строке var mosTime = h + 3 переменная h не определена и не в строгом режиме будет undefined. При сложением с числом - результат будет NaN. Поэтому сравнение timezone != mosTime всегда true.
В функции getMosTime переменной time не задано значение. Значение по умолчанию - undefined. При попытке вызвать time.getUTCHours() будет ошибка.
строчки с заданием значений нужно внести внутрь функции getMosTime
для вывода нужен либо элемент, в котором можно задать value либо innerHTML, либо воспользоваться console.log.

function addZero(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function getMosTime() {
  var time, h, m;
  time = new Date(Date.now());
  var timezone = time.getTimezoneOffset() / 60
  h = time.getUTCHours();
  var mosTime = (h + 3) % 24; // убираем возможность переполнения
  if (timezone != mosTime) {
    m = addZero(time.getUTCMinutes());
    return (mosTime) + '<span>:</span>' + m;
  }
}

function setTimer() {
  document.body.innerHTML = getMosTime();
}
setInterval(setTimer, 1000);

Для случая, когда не нужно отображать время, если часовой пояс +3 - достаточно именно это и проверить

function addZero(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function getMosTime() {
  var time, h, m;
  time = new Date();
  var timezone = time.getTimezoneOffset() / 60
  if (timezone == -3) return ''; // если таймзона UTC+3 - ничего не выводим
  
  h = time.getUTCHours();
  var mosTime = (h + 3) % 24; // убираем возможность переполнения
  if (timezone != mosTime) {
    m = addZero(time.getUTCMinutes());
    return (mosTime) + '<span>:</span>' + m;
  }
}

function setTimer() {
  document.body.innerHTML = getMosTime();
}
setInterval(setTimer, 1000);

Также можно просто воспользоваться toLocaleTimeString с нужной таймзоной

setInterval(() => {
  document.body.innerHTML = [new Date().toLocaleTimeString('ru-RU', {
      hour: "2-digit",
      minute: "2-digit",
      timeZone: 'UTC'
    }),
    new Date().toLocaleTimeString('ru-RU', {
      hour: "2-digit",
      minute: "2-digit",
      timeZone: '+03'
    }),
    new Date().toLocaleTimeString('ru-RU', {
      hour: "2-digit",
      minute: "2-digit",
      timeZone: '+05'
    })
  ].join('<br>');
}, 1000);

БЛОГ НА HUSL

Как настроить отображение времени на странице в зависимости от часового пояса пользователя на JS?

Ответы (1 шт):