JavaScript实现下拉选择时区并实时显示时间及相关信息

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

<select name="tz"></select>

<p>Select Timezone above</p>

<br><br>

<!-- 以下是根据不同时区显示的信息表格，id从t1到t7 -->
<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>

#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;
}

// 隐藏ct2元素，因为它可能在某些情况下不需要立即显示
var link = document.getElementById('ct2');
link.style.visibility = 'hidden';

// 获取下拉菜单元素
const sel = document.querySelector("[name=tz]");

// 定义一个函数来显示实时时区时间
const disp_TZ = () => {
  const tz = sel.value; // 获取当前选中的时区值
  // 使用toLocaleString获取指定时区的完整时间信息
  let str = new Date().toLocaleString("en-US", {
    timeZone: tz,
    timeZoneName: "short"
  });
  document.getElementById('ct').innerHTML = str + " ,<br> " + tz;

  // 计算并显示简化的时分秒
  const dt2 = new Date();
  const str2 = new Date(dt2.toLocaleString('en-US', {
    timeZone: tz
  }));
  const diff = dt2.getTime() - str2.getTime();
  const dt3 = new Date(dt2.getTime() - diff);
  const hour = dt3.getHours();
  const minute = dt3.getMinutes();
  const seconds = dt3.getSeconds();
  const str3 = `${hour}:${minute}:${seconds}`; // 模板字符串格式化
  document.getElementById('ct2').innerHTML = str3;

  display_c(); // 继续调用以实现实时更新
};

// 定义可供选择的时区列表
var my_timezones = [
  'None Selected ',
  'Asia/Manila',
  'Canada/Eastern',
  'Canada/Atlantic',
  'Canada/Central',
  'Canada/Pacific',
  'Canada/Mountain',
  'Canada/Newfoundland'
];

// 获取所有以't'开头的表格元素
const tables = document.querySelectorAll("table[id^=t]");

// 定义一个函数来切换表格的显示状态
const toggleStyle = () => {
  const idx = sel.selectedIndex; // 获取下拉菜单当前选中项的索引

  // 遍历所有表格，根据索引决定是否显示
  tables.forEach(table => table.hidden = (table.id !== `t${idx}`));
};

// 动态填充下拉菜单选项
my_timezones.forEach(tz => {
  let opt = document.createElement('option');
  opt.text = tz;
  opt.value = tz;
  sel.appendChild(opt);
});

// 定义一个函数来每秒刷新时间显示
const display_c = () => {
  const refresh = 1000; // 1秒刷新一次
  setTimeout(disp_TZ, refresh); // 使用setTimeout递归调用disp_TZ
};

// 为下拉菜单添加事件监听器
sel.addEventListener("change", disp_TZ); // 选项改变时更新时间
sel.addEventListener("change", toggleStyle); // 选项改变时切换表格显示

// 初始化页面状态：首次加载时隐藏所有表格，并显示初始时间
toggleStyle();
disp_TZ(); // 首次加载时调用一次以显示时间