使用moment.tz实现指定时区自动更新时钟时getHours报错的解决方法

你碰到的now_houston.getHours is not a function错误，核心原因是**moment.tz()返回的是Moment专属对象，不是原生JavaScript Date对象**，所以不能直接调用原生Date的getHours()、getMinutes()方法。

这里给你两种靠谱的解决方式，第二种更简洁推荐：

方式一：使用Moment内置的时分获取方法 #

Moment对象有自己的hours()和minutes()方法来获取时间分量，不过要注意分钟数小于10时需要补零（比如9分要显示为09）：

function updateClock() { 
  var now_houston = moment.tz("America/Chicago"); 
  // 获取小时
  var hours = now_houston.hours();
  // 获取分钟并补零
  var minutes = now_houston.minutes().toString().padStart(2, '0');
  var houston_time = `${hours}:${minutes}`; 
  document.getElementById('houston_time').innerHTML = houston_time; 
  setTimeout(updateClock, 1000); 
} 
updateClock();

方式二：直接用Moment的格式化方法（推荐） #

Moment最方便的就是自带强大的格式化功能，一行代码就能生成你要的HH:mm格式，还自动处理补零：

function updateClock() { 
  var now_houston = moment.tz("America/Chicago"); 
  // HH是24小时制小时，mm是两位分钟
  var houston_time = now_houston.format('HH:mm'); 
  document.getElementById('houston_time').innerHTML = houston_time; 
  setTimeout(updateClock, 1000); 
} 
updateClock();

小提示：如果需要12小时制的时间，把HH换成hh就行，还可以加A显示上午/下午（比如hh:mm A会输出10:45 AM）。

内容的提问来源于stack exchange，提问作者Peter