纯JS与HTML实现onclick：多时区时钟下拉选择更新问题

现有代码的核心问题 #

1. 按钮的onclick="getTime"无效：既没有传递参数，也未触发函数执行，且实际应该给国家列表选项绑定点击事件，而非下拉按钮。
2. 缺少国家名称到IANA时区的映射：toLocaleString需要标准时区字符串（如"Europe/Andorra"），而非普通国家/城市名。
3. 时钟无法实时更新：现有getTime仅执行一次，没有定时刷新逻辑。
4. 未完成事件监听绑定：尝试的代码中document.getElementById("countriesDropdown")未赋值给变量，且回调函数参数错误（点击事件的回调默认接收event对象，而非自定义参数）。

修复后的完整实现 #

1. 修改HTML（添加时区标识）

给每个国家选项的<a>标签添加data-timezone属性，存储对应的IANA时区：

<div class="dropdown">
  <div class="countriesList">
    <button id="countriesDropdown" class="dropdown_button">Select a Country</button>
    <ul id="countryOptions">
      <li><a href="#" data-timezone="Europe/Andorra">Andorra</a></li>
      <li><a href="#" data-timezone="Asia/Dubai">Dubai</a></li>
      <li><a href="#" data-timezone="Asia/Kabul">Kabul</a></li>
      <li><a href="#" data-timezone="Europe/Tirane">Tirane</a></li>
      <li><a href="#" data-timezone="Asia/Yerevan">Yerevan</a></li>
      <li><a href="#" data-timezone="Antarctica/Casey">Casey</a></li>
      <li><a href="#" data-timezone="Antarctica/Davis">Davis</a></li>
      <li><a href="#" data-timezone="Antarctica/DumontDUrville">Dumont Durville</a></li>
      <li><a href="#" data-timezone="Antarctica/Mawson">Mawson</a></li>
      <li><a href="#" data-timezone="Antarctica/Palmer">Palmer</a></li>
      <li><a href="#" data-timezone="Antarctica/Rothera">Rothera</a></li>
      <li><a href="#" data-timezone="Antarctica/Syowa">Syowa</a></li>
      <li><a href="#" data-timezone="Antarctica/Troll">Troll</a></li>
      <li><a href="#" data-timezone="Antarctica/Vostok">Vostok</a></li>
      <li><a href="#" data-timezone="America/Argentina/Buenos_Aires">Buenos_Aires</a></li>
      <li><a href="#" data-timezone="America/Argentina/Cordoba">Cordoba</a></li>
      <li><a href="#" data-timezone="America/Argentina/Salta">Salta</a></li>
      <li><a href="#" data-timezone="America/Argentina/Jujuy">Jujuy</a></li>
    </ul>
  </div>
</div>

<div id="selectedClock">00:00:00</div>

2. 完整JS实现（含实时更新）

// 存储当前定时器ID，切换时区时清除旧定时器
let clockInterval;

// 更新时钟的核心函数
function updateClock(timezone, elementId) {
  const element = document.getElementById(elementId);
  if (!element) return;

  // 生成带时分秒的格式化时间
  const timeStr = new Date().toLocaleString("en-US", {
    timeZone: timezone,
    hour12: false,
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
  });
  element.textContent = timeStr;
}

// 初始化页面交互
document.addEventListener('DOMContentLoaded', () => {
  const dropdownBtn = document.getElementById('countriesDropdown');
  const countryOptions = document.getElementById('countryOptions');
  const clockElementId = 'selectedClock';

  // 切换下拉菜单显示/隐藏
  dropdownBtn.addEventListener('click', () => {
    countryOptions.classList.toggle('show');
  });

  // 给每个国家选项绑定点击事件
  countryOptions.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault(); // 阻止默认跳转行为
      const timezone = link.dataset.timezone;
      
      // 清除之前的定时器，避免多个定时器同时运行
      if (clockInterval) clearInterval(clockInterval);
      
      // 立即更新一次时钟
      updateClock(timezone, clockElementId);
      // 启动每秒刷新的定时器
      clockInterval = setInterval(() => {
        updateClock(timezone, clockElementId);
      }, 1000);

      // 更新下拉按钮显示当前选中的国家
      dropdownBtn.textContent = link.textContent;
      // 隐藏下拉菜单
      countryOptions.classList.remove('show');
    });
  });

  // 点击页面其他区域关闭下拉菜单
  document.addEventListener('click', (e) => {
    if (!dropdownBtn.contains(e.target) && !countryOptions.contains(e.target)) {
      countryOptions.classList.remove('show');
    }
  });
});

3. 可选CSS（美化下拉菜单）

.countriesList {
  position: relative;
  display: inline-block;
}

.countriesList ul {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ddd;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 180px;
  z-index: 100;
}

.countriesList ul.show {
  display: block;
}

.countriesList li {
  padding: 8px 12px;
  cursor: pointer;
}

.countriesList li a {
  text-decoration: none;
  color: #333;
  display: block;
}

.countriesList li:hover {
  background: #f5f5f5;
}

.dropdown_button {
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
}

关键说明 #

• IANA时区映射：所有时区字符串均为标准IANA时区格式，可通过时区数据库查询对应值。
• 实时更新：使用setInterval每秒刷新一次时钟，切换时区时清除旧定时器，避免资源浪费。
• 交互优化：添加下拉菜单的显示/隐藏逻辑，点击外部区域关闭菜单，按钮显示当前选中国家。

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