基于第二个下拉框选择实现动态时区时钟运行的技术需求

解决方案 #

要实现时间显示依赖第二个下拉框的选择并保持时钟持续运行，我们需要做以下几个关键修改：

1. 移除第一个冗余的时区下拉框及其表单，因为我们不再需要它。
2. 建立第二个下拉框选项值与对应时区标识符的映射关系。
3. 修改时间更新函数，从第二个下拉框获取当前选中的时区。
4. 修复初始隐藏表格的逻辑，并确保时钟每秒自动刷新。

以下是修改后的完整代码：

HTML 部分

<span id="ct"></span><br>
<span id="ct2"></span><br>

<p>选择下方时区查看对应信息及当前时间</p>

<br><br>

<body onload="init()">
  <select name="test" id="test" size="1">
    <option value="0">None Selected</option>
    <option value="1">Asia/Manila</option>
    <option value="2">Canada/Eastern</option>
    <option value="3">Canada/Atlantic</option>
    <option value="4">Canada/Central</option>
    <option value="5">Canada/Pacific</option>
    <option value="6">Canada/Mountain</option>
    <option value="7">Canada/Newfoundland</option>
  </select>

  <table id="t1" border="1">
    <tr>
      <th>Country</th>
      <th>Capital</th>
    </tr>
    <tr>
      <td>Philippines</td>
      <td>Manila</td>
    </tr>
  </table>

  <table id="t2" border="1">
    <tr>
      <th> Province/Territory</th>
      <th> Time Zone</th>
      <th> Capital</th>
      <th> Other Cities</th>
    </tr>
    <tr>
      <td> Ontario</td>
      <td> Eastern</td>
      <td> Toronto</td>
      <td> Ottawa, Mississauga, <br>Hamilton, Kitchener, <br>London, Oshawa, <br>Windsor, Barrie, <br>Guelph, Kingston, <br>Sudbury, Thunder Bay, <br>Etobicoke</td>
    </tr>
    <tr>
      <td> Quebec</td>
      <td> Eastern</td>
      <td> Quebec City</td>
      <td> Montreal, Sherbrooke, <br>Trois-Rivières, Chicoutimi, <br>Châteauguay, Granby</td>
    </tr>
    <tr>
      <td> Nunavut</td>
      <td> Eastern</td>
      <td> Iqaluit</td>
      <td> Cambridge Bay, Rankin Inlet</td>
    </tr>
  </table>

  <table id="t3" border="1">
    <tr>
      <th> Province/Territory</th>
      <th> Time Zone</th>
      <th> Capital</th>
      <th> Other Cities</th>
    </tr>
    <tr>
      <td> Nova Scotia</td>
      <td> Atlantic</td>
      <td> Halifax</td>
      <td> Cape Breton, Sydney, <br>Truro, Dartmouth </td>
    </tr>
    <tr>
      <td> New Brunswick</td>
      <td> Atlantic</td>
      <td> Fredericton</td>
      <td> Moncton, Saint John, <br>Fredericton</td>
    </tr>
    <tr>
      <td> Prince Edward Island</td>
      <td> Atlantic</td>
      <td> Charlottetown</td>
      <td> Summerside, Stratford</td>
    </tr>
  </table>

  <table id="t4" border="1">
    <tr>
      <th> Province/Territory</th>
      <th> Time Zone</th>
      <th> Capital</th>
      <th> Other Cities</th>
    </tr>
    <tr>
      <td> Manitoba</td>
      <td> Central</td>
      <td> Winnipeg</td>
      <td> Brandon, Churchill, <br>Steinbach, Winkler, <br>Portage La Prairie, Thompson</td>
    </tr>
  </table>

  <table id="t5" border="1">
    <tr>
      <th> Province/Territory</th>
      <th> Time Zone</th>
      <th> Capital</th>
      <th> Other Cities</th>
    </tr>
    <tr>
      <td> British Columbia</td>
      <td> Pacific</td>
      <td> Victoria</td>
      <td> Vancouver, Surrey, <br>Burnaby, Richmond, <br>Abbotsford, Coquitlam, <br>Kelowna, Nanaimo, <br>Kamloops</td>
    </tr>
    <tr>
      <td> Yukon</td>
      <td> Pacific</td>
      <td> Whitehorse</td>
      <td> Cambridge Bay, Rankin Inlet</td>
    </tr>
  </table>

  <table id="t6" border="1">
    <tr>
      <th> Province/Territory</th>
      <th> Time Zone</th>
      <th> Capital</th>
      <th> Other Cities</th>
    </tr>
    <tr>
      <td> Saskatchewan</td>
      <td> Mountain</td>
      <td> Regina</td>
      <td> Saskatoon, Moose Jaw, <br>Swift Current, Yorkton</td>
    </tr>
    <tr>
      <td> Alberta</td>
      <td> Mountain</td>
      <td> Edmonton</td>
      <td> Calgary, Red Deer, <br>Lethbridge, Airdrie, <br>Medicine Hat, Grande Prairie, <br>Banff</td>
    </tr>
    <tr>
      <td> Northwest Territories</td>
      <td> Mountain</td>
      <td> Yellowknife</td>
      <td> Inuvik</td>
    </tr>
  </table>

  <table id="t7" border="1">
    <tr>
      <th> Province/Territory</th>
      <th> Time Zone</th>
      <th> Capital</th>
      <th> Other Cities</th>
    </tr>
    <tr>
      <td> Newfoundland and Labrador</td>
      <td> Newfoundland</td>
      <td> St. John's</td>
      <td> Corner Brook, Grand Falls-Windsor, <br>Gander</td>
    </tr>
  </table>
</body>

CSS 部分

#ct {
  font-family: arial;
  font-size: 15px;
}

p {
  font-family: arial;
  font-size: 15px;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 1px;
  font-size: 15px;
}

td,
th {
  text-align: left;
  padding: 5px;
  font-family: arial;
  font-size: 15px;
}

th {
  text-align: center;
  padding: 5px;
  font-family: arial;
  font-size: 15px;
}

JavaScript 部分

// 隐藏初始的秒数显示
document.getElementById('ct2').style.visibility = 'hidden';

// 建立下拉框值与时区的映射
const timezoneMap = {
  '0': '',
  '1': 'Asia/Manila',
  '2': 'Canada/Eastern',
  '3': 'Canada/Atlantic',
  '4': 'Canada/Central',
  '5': 'Canada/Pacific',
  '6': 'Canada/Mountain',
  '7': 'Canada/Newfoundland'
};

let timerId; // 用于存储定时器ID，避免重复触发

function updateTime() {
  const select = document.getElementById('test');
  const selectedValue = select.value;
  const tz = timezoneMap[selectedValue];

  if (!tz) {
    // 未选择时区时清空时间显示
    document.getElementById('ct').innerHTML = '';
    document.getElementById('ct2').innerHTML = '';
    return;
  }

  // 更新格式化时间字符串
  const str = new Date().toLocaleString("en-US", {
    timeZone: tz,
    timeZoneName: "short"
  });
  document.getElementById('ct').innerHTML = `${str} ,<br> ${tz}`;

  // 更新时分秒显示（补零优化）
  const localStr = new Date().toLocaleString('en-US', { timeZone: tz });
  const dateInTz = new Date(localStr);
  const hours = dateInTz.getHours().toString().padStart(2, '0');
  const minutes = dateInTz.getMinutes().toString().padStart(2, '0');
  const seconds = dateInTz.getSeconds().toString().padStart(2, '0');
  document.getElementById('ct2').innerHTML = `${hours}:${minutes}:${seconds}`;
}

function startClock() {
  // 清理旧定时器，避免重复触发
  if (timerId) clearTimeout(timerId);
  updateTime();
  timerId = setTimeout(startClock, 1000);
}

// 下拉框变化事件处理
const timezoneSelect = document.getElementById('test');
timezoneSelect.addEventListener('change', function() {
  // 隐藏所有表格
  for (let i = 1; i <=7; i++) {
    document.getElementById(`t${i}`).style.display = 'none';
  }
  // 显示选中的表格
  if (this.value !== '0') {
    document.getElementById(`t${this.value}`).style.display = '';
  }
  // 立即更新时间并重启时钟
  startClock();
});

// 页面初始化
function init() {
  // 隐藏所有表格
  for (let i = 1; i <=7; i++) {
    document.getElementById(`t${i}`).style.display = 'none';
  }
  // 启动时钟
  startClock();
}

关键修改说明 #

• 移除冗余控件：删掉了第一个时区下拉框和对应的表单，简化页面结构。
• 时区映射：用对象存储下拉框值和时区标识符的对应关系，方便快速获取选中的时区。
• 时钟逻辑优化：使用startClock函数管理定时器，每次更新前清理旧定时器，避免重复触发；同时在下拉框变化时立即更新时间。
• 表格隐藏修复：初始化时通过循环隐藏所有表格，避免原代码中this.value未定义的问题。

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