如何用UTC+6时区时间替代浏览器本地时间实现电台节目实时展示？

核心逻辑：获取目标时区时间 #

要解决时区偏差问题，你需要用UTC时间计算电台所在时区的小时数，核心步骤：

• 用getUTCHours()获取不受用户本地时区影响的UTC小时数
• 减去6小时，通过+24再取模24处理结果为负数的情况，保证小时数始终在0-23范围内

代码示例：

// 计算电台所在时区（UTC-6）的当前小时
const utcHour = new Date().getUTCHours();
const stationHour = (utcHour - 6 + 24) % 24;

优化后的完整代码 #

原代码存在重复创建DOM元素的问题（每个条件分支都添加图片，会导致页面多次插入相同元素），以下是修正并优化后的版本：

// 提前创建图片元素，避免重复初始化
const imgElement = document.createElement("img");
imgElement.width = 70;
imgElement.height = 70; // 修正原代码笔误imgEeight

// 获取电台时区的当前小时
const utcHour = new Date().getUTCHours();
const stationHour = (utcHour - 6 + 24) % 24;

// 提前获取DOM元素，减少重复查询开销
const container = document.getElementById("imageContainer");
const showOnElement = document.getElementById("showon");

// 清空容器旧内容，避免重复添加图片
container.innerHTML = "";
container.appendChild(imgElement);

// 根据电台时区小时判断节目内容
if (stationHour >= 0 && stationHour <= 4) {
  $(".open").show();
  $(".closed").hide();
  imgElement.src = "https://www.starhit1fm.com/images/covers/musicnonstop.jpg";
  showOnElement.innerHTML = "Music Non Stop<br>We get you through the night!";
} else if (stationHour === 5) { // 简化原有的冗余范围判断
  $(".open").show();
  $(".closed").hide();
  imgElement.src = "https://www.starhit1fm.com/images/covers/morning.jpg";
  showOnElement.innerHTML = "Good Morning<br>Program starts at 6 AM";
}
// 可继续添加其他时间段的节目判断逻辑

关键说明 #

• getUTCHours()：返回当前UTC时间的小时数（0-23），完全不受用户本地时区设置影响
• (utcHour -6 +24) %24：处理UTC小时减6后为负数的场景，比如UTC 0点减6等于-6，加24后转为18，取模24确保结果始终在0-23区间内
• 优化点：提前初始化DOM元素、统一图片配置、清空容器旧内容，提升代码运行效率和页面整洁度

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