具有可变时区的 JavaScript 时钟

Question

我有一个像这样的时钟:

const timeContainer = document.querySelector('.timeContainer');

var showTime = (timeZone) => {
  let utcTime = new Date().toUTCString();
  //need to subtract/add timezone from utcTime
  //need to remove everything except for time e.g. 00:22:22
  return utcTime;
};

setInterval( () => {
  timeContainer.innerHTML = showTime('-8');
}, 1000);

这给了我这样的 GMT 时间:

Tue, 29 Nov 2016 00:35:54 GMT

..这就是我想要的!但是假设我想获取香港的时间，并且仅数字时间，没有日期和时区信息。

我基本上需要:

a) 从 utcTime 中减去/添加变量 timeZone 整数

b) 删除输出中除时间之外的所有文本，例如utcTime 仅输出为 00:22:22

我基本上需要根据我运行 showTime 的 timeZone 整数生成一个时钟，例如:

showTime(-5);
//returns time in EST timezone
showTime(-6);
//returns time in CST timezone

等等。有没有办法使用 .toUTCString() 来做到这一点？或者有更好的方法吗？

这是一个jsFiddle用我的代码。

Answer 1

获取时间戳，即自 UTC 纪元以来的时间，按所需时区偏移并构建字符串。

const timeContainer = document.querySelector('.timeContainer');

var dateToTimeString = (dt) => {
  let hh = ('0' + dt.getUTCHours()).slice(-2);
  let mm = ('0' + dt.getUTCMinutes()).slice(-2);
  let ss = ('0' + dt.getUTCSeconds()).slice(-2);
  return hh + ':' + mm + ':' + ss;
}

var showTime = (timeZone) => {
  // convert timezone in hours to milliseconds
  let tzTime = new Date(Date.now() + timeZone * 3600000);
  return dateToTimeString(tzTime);
};

setInterval( () => {
  timeContainer.innerHTML = showTime('-8');
}, 1000);

jsFiddle

将输出

17:00:00