点击导航栏项分别获取英国、德国当前日期时间的JS实现求助

你需要实现的导航点击切换英国、德国实时时间的功能，原有代码存在语法、API调用、逻辑设计三类错误，无法正常运行，以下是可直接落地的修复方案。

原代码核心错误点 #

• 时间源错误：硬编码了2020、2012年的固定UTC时间点，没有获取实时时间；未赋值的变量b直接调用时间方法，会直接抛出JS错误中断执行
• DOM API调用错误：getElementByClassName为拼写错误，正确方法为getElementsByClassName，且该方法返回元素集合，不能直接绑定事件；getElementById传入未定义的变量time2作为参数，无法匹配到对应DOM节点
• 事件绑定逻辑错误：将字符串直接赋值给onclick属性，未传入合法回调函数；事件绑定逻辑写在1秒执行一次的定时器中，会重复绑定事件造成内存泄漏
• 格式化逻辑错误：未正确使用toLocale系列方法的区域参数，无法输出对应地区的时间日期格式；变量作用域混乱，重复声明同名变量造成值覆盖

参考实现代码 #

HTML结构（对应导航与显示容器） #

<ul class="navbar-nav mr-auto">
  <li class="nav-item">
    <a class="nav-link" data-region="GB" href="javascript:void(0);">英国时间</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-region="DE" href="javascript:void(0);">德国时间</a>
  </li>
</ul>
<!-- 时间展示容器 -->
<div id="time-box"></div>

JavaScript逻辑 #

// 地区配置：对应区域码和展示名称
const regionMap = {
  GB: { locale: 'en-GB', name: '英国' },
  DE: { locale: 'de-DE', name: '德国' }
};
const timeContainer = document.getElementById('time-box');
const dateFormatOpt = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
let timeUpdateTimer = null;

// 渲染指定地区的实时时间
function showRegionTime(regionKey) {
  // 清除之前的更新定时器，避免多实例冲突
  if (timeUpdateTimer) clearInterval(timeUpdateTimer);
  const currentRegion = regionMap[regionKey];

  // 立即渲染一次，避免首次加载等待1秒
  updateContent();
  // 每秒刷新时间
  timeUpdateTimer = setInterval(updateContent, 1000);

  function updateContent() {
    const now = new Date();
    const currentDate = now.toLocaleDateString(currentRegion.locale, dateFormatOpt);
    const currentTime = now.toLocaleTimeString(currentRegion.locale, { hour12: false });
    timeContainer.innerHTML = `${currentRegion.name}当前时间：${currentTime}<br>日期：${currentDate}`;
  }
}

// 绑定导航点击事件
document.querySelectorAll('.navbar-nav .nav-link').forEach(navLink => {
  navLink.addEventListener('click', function() {
    // 切换激活态样式
    document.querySelectorAll('.navbar-nav .nav-link').forEach(item => item.classList.remove('active'));
    this.classList.add('active');
    // 触发对应地区时间渲染
    showRegionTime(this.dataset.region);
  });
});

实现说明 #

• 通过data-region自定义属性关联导航项和对应地区配置，不需要写复杂的选择器匹配逻辑，扩展性强，后续新增其他国家时间只需要在regionMap加配置、导航项加对应data-region属性即可
• 利用原生toLocaleDateString/toLocaleTimeStringAPI处理区域格式化，浏览器自动适配时区、夏令时，不需要手动计算时差，不会出现时间计算错误
• 切换地区时自动清除上一个定时器，避免无意义的性能消耗
• 点击后立即渲染时间，不需要等待1秒定时器触发，交互更流畅

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