Javascript HTML多时区时钟

Question

我如何将我的checkTime和checkMinute函数整合为一个函数，以便当我执行（m + 30）的偏移量时，当m达到60时，它也会使h转到下一个小时。谢谢！

目前，我的代码会告知时间，并且可以在24小时范围内进行数小时的偏移，我的问题是我不允许我以+ 30分钟的偏移量更改代码。

我的if语句不能使我得到想要的结果，即分钟数偏移+ 30时达到60分钟，则小时数将转到下一个，而不只是影响分钟数。

我相信我需要将这两个功能结合在一起，但不确定如何准确地做到这一点。

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

const timeObj = {
  "txt1": "America/New_York",
  "txt2": "Asia/Kolkata",
  "txt3": "Europe/Amsterdam"
};

const timeClock = () => {
  for (t in timeObj) {
    let d = new Date().toLocaleString("en-US", {
      timeZone: timeObj[t]
    })
    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>