Javascript HTML Несколько часовых поясов

Question

Как бы я собрал воедино мои функции checkTime и checkMinute, чтобы при выполнении смещения (m + 30) он также делал h go до следующего часа, когда m достигает 60. Спасибо!

В настоящее время мой код сообщает время и может смещаться в течение часов по 24-часовой шкале, моя проблема в том, что он не позволяет мне изменять код со смещением + 30 минут, что я хотел бы иметь возможность делать.

Мои операторы if не дают мне желаемого результата, когда минуты достигают 60 от выполнения смещения + 30, тогда час будет go к следующему вместо того, чтобы влиять только на минуты.

Полагаю, мне нужно объединить две функции, но я не уверен, как это сделать точно.

function addLeadingZero(n) {
  return n < 10 ? '0' + n : n;
}

function timeClock(timeZoneOffset) {
  var d = new Date();
  d.setHours(d.getUTCHours() + timeZoneOffset); // set time zone offset
  var h = d.getUTCHours();
  var m = d.getUTCMinutes();
  var s = d.getUTCSeconds();
  /*    h = h % 12;
      h = h ? h : 12; // replace '0' w/ '12'  */
  /*  h = checkHour(h)  */
  m = checkTime(m);
  s = checkTime(s);
  h = addLeadingZero(h);

  document.all["txt3"].innerHTML = /*+ checkHour*/ (h - 4) + ':' + m + ':' + s + ' ';
  document.all["txt1"].innerHTML = /*+ checkHour*/ (h + 3) + ':' + m + '' + ' ';
  document.all["txt2"].innerHTML = h + ':' + checkMinute(m + 30) + '' + ' ';
  document.all["txt4"].innerHTML = h + ':' + m + '' + ' ';
  document.all["txt5"].innerHTML = h + ':' + m + '' + ' ';
  setTimeout(function() {
    timeClock(timeZoneOffset)
  }, 500);
}

function checkTime(i) {
  var j = i;
  if (i < 10) {
    j = "0" + i;
  }
  return j;
}

function checkHour(i) {
  var j = i;
  if (i > 23) {
    j = j - 24;
  }
  if (i < 0) {
    j = "0" + i;
  }
  return j;
}

function checkMinute(i) {
  var j = i;
  if (i > 59) {
    j = j - 60;
  }
  if (i < 0) {
    j = "0" + i;
  }
  return j;
}

/* setInterval(function() {
      startTime();
      }, 500);
    })(jQuery);    */

window.onload = function() {
  timeClock(2);
}

<div id="txt3"></div>
<div id="txt1"></div>
<div id="txt2"></div>
<div id="txt4"></div>
<div id="txt5"></div>

Answer 1

Если быть точным: Добро пожаловать в 2020;)

для информации: - список TZ -> https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

- Дата .toLocaleString использование -> https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/toLocaleString

[править] добавлено военное время (без секунд и : разделитель)

первая версия с гражданским и военное время

const OptionsCivil    = { hour12:true,  hour:'numeric', minute:'2-digit', second:'2-digit' };  
const OptionsMilitary = { hour12:false, hour:'2-digit', minute:'2-digit' };

const CivilTime=(dt,dz)=>dt.toLocaleString("en-GB", {...OptionsCivil, timeZone:dz })

const MilitaryTime=(dt,dz)=>
  {
  let rep = dt.toLocaleString("en-US", {...OptionsMilitary, timeZone:dz }).replace(/:/g,'')
  return (rep==='0000') ? 2400 : rep.replace(/^24/, '00'); // specific browsers marmelade
  }

setInterval(() => {
  let d = new Date();
  document.querySelectorAll('.timZon')
            .forEach(el=> el.textContent = CivilTime(d, el.dataset.timeZone));
  document.querySelectorAll('.timZonM')
            .forEach(el=> el.textContent = MilitaryTime(d, el.dataset.timeZone));
}, 1000);

/* or more concise :
setInterval(() => {
  let d = new Date();
  document.querySelectorAll('.timZon, .timZonM')
           .forEach(el=>el.textContent =(el.classList.contains('timZonM')?MilitaryTime:CivilTime)(d, el.dataset.timeZone));
}, 1000);
*/

div.timZon,
div.timZonM {
  width: 7em;
  text-align: right;
  margin:.4em;
  color: deeppink;
}
div.timZonM { /* military time */
  width: 3em;
  color:navy;
}

<div class="timZon"  data-time-zone="America/New_York" ></div>
<div class="timZonM" data-time-zone="America/New_York" ></div>
<div class="timZonM" data-time-zone="Asia/Kolkata"></div>
<div class="timZonM" data-time-zone="Europe/Paris"></div>
<div class="timZonM" data-time-zone="Australia/Adelaide"></div>
<div class="timZonM" data-time-zone="Etc/GMT"></div>
<div class="timZonM" data-time-zone="Etc/GMT+4"></div>
<div class="timZonM" data-time-zone="Etc/GMT-5"></div>

---

После последних комментариев здесь - версия только с военным временем, первая в списке будет единственной, чтобы указать секунд

---

const OptionsMilitary = { hour12:false, hour:'2-digit', minute:'2-digit', second:'2-digit' };

const MilitaryTime=(elm, dt)=>
  {
  let [hh,mm,ss] = dt.toLocaleString("en-US", {...OptionsMilitary, timeZone:elm.dataset.timeZone }).split(':') 
  if ('seconds'in elm.dataset) elm.dataset.seconds = ':'+ss
  elm.textContent = (hh=='00'&&mm=='00') ? '2400' : (hh+mm).replace(/^24/, '00'); // specific browsers marmelade
  }

setInterval(() => {
  let dateTime = new Date();
  document.querySelectorAll('.timZonM').forEach(el=>MilitaryTime(el, dateTime));
}, 1000);

div.timZonM { /* military time */
  width: 3em;
  margin:.3em;
  color: navy;
  font-size: 20px;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: .05em;
}
div.timZonM::after {
  content: attr(data-seconds);
  color:crimson;
}

<div class="timZonM" data-time-zone="America/New_York"></div>
<div class="timZonM" data-time-zone="Asia/Kolkata"></div>
<div class="timZonM" data-time-zone="Europe/Paris" data-seconds></div> <!-- add data-seconds to show seconds value -->
<!-- as much as you want... -->
<div class="timZonM" data-time-zone="Australia/Adelaide"></div>
<div class="timZonM" data-time-zone="Asia/Kathmandu"></div>
<div class="timZonM" data-time-zone="Etc/GMT"></div>
<div class="timZonM" data-time-zone="Etc/GMT+4" data-seconds></div>
<div class="timZonM" data-time-zone="Etc/GMT-5"></div>

для горизонтального отображения css flex box

const OptionsMilitary = { hour12:false, hour:'2-digit', minute:'2-digit', second:'2-digit' }
  ,   timZonMil_All   = document.querySelectorAll('div.timZonMil > div')
  ;
const MilitaryTime=(elm, dt)=>
  {
  let [hh,mm,ss] = dt.toLocaleString("en-US", {...OptionsMilitary, timeZone:elm.dataset.timeZone }).split(':')
  elm.textContent = (hh=='00'&&mm=='00') ? '2400' : (hh+mm).replace(/^24/, '00'); // specific browsers marmelade
  if ('seconds' in elm.dataset) elm.innerHTML  += `<span>:${ss}</span>` 
  }
setInterval(() => {
  let dateTime = new Date();
  timZonMil_All.forEach(el=>MilitaryTime(el, dateTime));
}, 500);

  div.timZonMil {
    display: flex;
    justify-content: space-between;
    min-width: 100vw;
    position: absolute;
    top: 123px;
    color: navy;
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: .05em;
  }
  div.timZonMil > div {
    min-width: 3.6em;
    text-align: center;
  }
  div.timZonMil > div[data-seconds] {
    min-width: 5.2em;
  }
  div.timZonMil > div > span {
    color:crimson;
  }

<div class="timZonMil" >
  <div data-time-zone="Asia/Tehran"></div>
  <div data-time-zone="Etc/GMT"    ></div>
  <div data-time-zone="Etc/GMT+4"  data-seconds ></div>
  <div data-time-zone="Etc/GMT-8"  ></div>
  <div data-time-zone="Etc/GMT-14" ></div>
</div>

Я также изменил второй метод отображения относительно последнего сообщения ypur

Answer 2

Добро пожаловать в 2020;)

Для военного времени ЧЧММ вы можете использовать

const pad = (num) => ("0" + num).slice(-2);
....
const [hh,mm,ss] = d.split(", ")[1].split(":");
document.querySelector("#" + t).innerHTML = pad(hh)+pad(mm)

const timeObj = {
  "txt1": {
    "tz": "America/New_York",
    "locale": "en-US"
  },
  "txt2": {
    "tz": "Asia/Kolkata",
    "locale": "en-IN"
  },
  "txt3": {
    "tz": "Europe/Berlin",
    "locale": "de-DE"
  }
};

const timeClock = () => {
  for (t in timeObj) {
    const tObj = timeObj[t];
    let d = new Date().toLocaleString(
      tObj.locale, { "timeZone": tObj.tz })
    document.querySelector("#" + t).innerHTML = d.split(", ")[1];
  }
};
setInterval(timeClock, 500);

div {
  width: 100px;
  text-align: right
}

<div id="txt1"></div>
<div id="txt2"></div>
<div id="txt3"></div>