Javascript HTML Multiple Timezone Clock

Question

How would I bring together my checkTime and checkMinute function into one so that when I do an offset of (m + 30) it will also make h go to the next hour when m reaches 60. Thanks!

Currently My code tells the time and can take on offset for hours on a 24 hour scale, my issue is it does not allow me to change the code in offset of + 30 minutes which I would like the ability to do.

My if statements aren't getting me the outcome I want which is when minutes hit 60 from doing an offset of + 30 then the hour will go to the next one instead of only affecting the minutes.

I believe I would need to bring the two function together but am not sure how to do this accurately.

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

To be precise: Welcome to 2020 ;)

for info : -- list of TZ -> https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

-- Date.toLocaleString usage -> https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/toLocaleString

[edit] added military time (without seconds and : separator)

first version with civil and military times

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;
  font-family : 'Courier New', Courier, monospace;
}
div.timZonM { /* military time */
  width  : 3em;
  color  : navy;
}

/* css tooltip code for displaying timeZone value
   ----------------> irrelevant part, can be removed) */
div[data-time-zone] {
  cursor    : crosshair;
  position  : relative;
  }
div[data-time-zone]:hover {
  background-color : yellow;
  }
div[data-time-zone]:hover:before {
  position         : absolute;
  font-size        : .8em;
  top              : 1.7em;
  border-radius    : .8em;
  content          : 'TZ: ' attr(data-time-zone);
  background-color : darkblue;
  color            : whitesmoke;
  white-space      : nowrap;
  z-index          : 1000;
  padding          : .4em .6em;
  }

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

---

After the last comments here is a version only with military times, the first on the list to be the only one to indicate the seconds

---

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

/* css tooltip code for displaying timeZone value
   ----------------> irrelevant part, can be removed) */
div[data-time-zone] {
  cursor    : crosshair;
  position  : relative;
  }
div[data-time-zone]:hover {
  background-color : yellow;
  }
div[data-time-zone]:hover:before {
  position         : absolute;
  font-size        : .8em;
  top              : 1.7em;
  border-radius    : .8em;
  content          : 'TZ: ' attr(data-time-zone);
  background-color : darkblue;
  color            : whitesmoke;
  white-space      : nowrap;
  z-index          : 1000;
  padding          : .4em .6em;
  }

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

for horizontaly display use 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;
  }

/* css tooltip code for displaying timeZone value
   ----------------> irrelevant part, can be removed) */
div[data-time-zone] {
  cursor    : crosshair;
  position  : relative;
  }
div[data-time-zone]:hover {
  background-color : yellow;
  }
div[data-time-zone]:hover:before {
  position         : absolute;
  font-size        : .8em;
  top              : 1.7em;
  border-radius    : .8em;
  content          : 'TZ: ' attr(data-time-zone);
  background-color : darkblue;
  color            : whitesmoke;
  white-space      : nowrap;
  z-index          : 1000;
  padding          : .4em .6em;
  }

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

I also changed second display method, regarding ypur last message

Answer 2

Welcome to 2020 ;)

For HHMM military time you can use

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>