是否有可能重写时钟功能，以便更改小时数？

Question

我正在设计一个小的浏览器项目，您从列表中选择一个城市，它向您显示您选择的城市的当前时间。虽然我遇到了一个问题。该代码仅在短时间内显示正确的时间，然后返回原始的UTC标准时间。问题出现在“ setTimeout”位。有没有可能覆盖这个？通过添加clearTimeout也许？

function utcStandard(offset) {
  var date = new Date();
  var hh = date.getUTCHours();
  var mm = date.getUTCMinutes();
  var ss = date.getUTCSeconds();
  if (offset != undefined) {
    hh += offset
  };
  hh = checkTime(hh);
  mm = checkTime(mm);
  ss = checkTime(ss);
  document.getElementById("time").innerHTML =
    hh + ":" + mm + ":" + ss;
  var t = setTimeout(utcStandard, 500);

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

我决定将功能添加到HTML列表中的每个项目。例如。

<ul>
  <li><a href="#" onclick="utcStandard(1)">Amsterdam</a></li>
</ul>

Answer 1

像这样-较短，在需要时使用UTC

我更改为分钟，因此您可以在印度有5:30的时间

我暂时不考虑DST

const pad = (num) => ("0"+num).slice(-2);
let t;
let curOffset = 0;

const reset = (offset) => { 
  clearInterval(t);
  curOffset = offset ? offset : curOffset;  
  t = setInterval(utcStandard,500);
  return false;
};

const utcStandard = () => {
  var date = new Date(new Date().toUTCString().substr(0, 25))
  date.setMinutes(date.getMinutes()+curOffset);
  const hh = pad(date.getHours());
  const mm = pad(date.getMinutes());
  const ss = pad(date.getSeconds());
  document.getElementById("time").innerHTML = "" + hh + ":" + mm + ":" + ss;
};
reset(0);

<span id="time"></span>

<ul>
  <li><a href="#" onclick="return reset(60)">Amsterdam</a></li>
  <li><a href="#" onclick="return reset(0)">London</a></li>
  <li><a href="#" onclick="return reset((5*60)+30)">Kolkata</a></li>
</ul>

Answer 2

以下实现具有三种状态：

1. dateString-时间的字符串表示形式
2. offset-当前选择的时间偏移
3. [tickId-更改时区时取消当前setTimeout的ID

setOffset在单击时区标签时被调用。它将更改偏移并清除飞行中的setTimeout，然后重新开始计时。这样做的原因是为了避免等待半秒钟的时间来进行更新。

[tick每500毫秒更新一次dateString。

[render将dateString呈现到DOM。

let dateString = '00:00:00'
let offset = 0
let tickId = null

function setOffset(o = 0) {
  offset = o
  clearTimeout(tickId)
  tick()
}

function toDateString(date = new Date) {
  const DTF = new Intl.DateTimeFormat('en', 
      { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false  })
  const d = DTF.formatToParts(date)
  return `${d[0].value}:${d[2].value}:${d[4].value}`
}

function tick() {
  const date = new Date
  date.setHours(date.getHours() + offset)
  dateString = toDateString(date)
  tickId = setTimeout(tick, 500);
}

function render() {
  document.getElementById('time').innerText = dateString
  requestAnimationFrame(render)
}

tick()
requestAnimationFrame(render)

input[type="radio"] {
  display: none;
}

label {
  font-family: sans-serif;
  padding: 10px;
  margin: 10px;
  display: block;
  cursor: pointer;
}

input[type="radio"]:checked+label {
  background-color: #bbb;
}

#time {
  width: 100%;
  font-family: sans-serif;
  font-size: 4em;
  text-align: center;
}

<input type="radio" name="group1" id="london" checked>
<label for="london" onclick="setOffset(0)">London</label>
<input type="radio" name="group1" id="amsterdam">
<label for="amsterdam" onclick="setOffset(1)">Amsterdam</label>
<input type="radio" name="group1" id="new-york">
<label for="new-york" onclick="setOffset(-4)">New York</label>
<div id="time"></div>