本教程将指导您如何使用html、css和javascript构建一个交互式网页，实现通过下拉菜单选择不同时区，并实时显示该时区的当前时间。同时，页面将根据选择动态展示或隐藏与该时区相关的详细信息表格，确保用户界面的响应性和信息的直观呈现。
在现代Web应用中，为用户提供个性化的时间显示和相关信息是常见的需求。本教程将详细介绍如何通过一个简洁的下拉菜单，不仅能实时更新所选时区的当前时间，还能动态切换显示与该时区相关的详细地域信息表格。我们将利用HTML构建页面结构，CSS进行样式美化，并运用JavaScript实现核心的动态交互逻辑。
核心功能实现
为了实现上述功能，我们需要精心设计HTML结构、应用CSS样式，并编写JavaScript逻辑来处理用户交互和时间更新。
HTML 结构
页面的HTML结构主要包含用于显示时间的<span>元素、一个用于选择时区的<select>下拉菜单，以及一系列根据时区选择而显示/隐藏的<table>元素。
<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>在上述HTML中：
立即学习“Java免费学习笔记（深入）”；
- id="ct"和id="ct2"用于显示实时时间。ct显示包含日期、时间、时区缩写和全名的详细信息，而ct2则显示简化的时分秒。
- <select name="tz">是核心的下拉菜单，用户通过它选择不同的时区。
- 一系列<table>元素（id从t1到t7）包含了不同时区的详细地域信息，它们将根据下拉菜单的选择动态显示或隐藏。
CSS 样式
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;
}这些样式确保了页面元素具有良好的可读性和统一的视觉风格。select元素的appearance: none属性用于移除浏览器默认的下拉箭头样式，以便更好地进行自定义。
JavaScript 逻辑
JavaScript是实现所有动态行为的核心。它负责填充下拉菜单、实时更新时间、以及根据用户选择切换表格的显示状态。
// 隐藏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(); // 首次加载时调用一次以显示时间JavaScript 逻辑详解：
-
DOM 元素获取与初始化:
- link = document.getElementById('ct2'); link.style.visibility = 'hidden';：ct2元素（用于显示简化的时分秒）在页面加载时被隐藏。
- const sel = document.querySelector("[name=tz]");：获取名为tz的下拉菜单元素。
- const tables = document.querySelectorAll("table[id^=t]");：获取所有id以t开头的表格元素，方便统一管理。
-
动态填充下拉菜单:
- my_timezones数组定义了所有可供选择的时区。
- my_timezones.forEach(...)循环遍历数组，为每个时区创建一个<option>元素并添加到sel下拉菜单中。
-
实时时间显示函数 (disp_TZ):
- const tz = sel.value;：获取当前下拉菜单选中的时区值。
- new Date().toLocaleString("en-US", { timeZone: tz, timeZoneName: "short" })：这是实现时区转换的关键。它根据指定的timeZone将当前日期时间格式化为对应时区的字符串，并包含时区名称缩写。
- document.getElementById('ct').innerHTML = ...：将格式化后的时间字符串更新到ct元素。
- 为了显示纯粹的HH:MM:SS，代码通过计算当前本地时间与目标时区时间的差异，再将本地时间调整这个差异，从而获取目标时区的时分秒。这是一种间接但有效的方法。
- display_c()：在更新时间后，递归调用display_c()，确保时间持续刷新。
-
内容切换函数 (toggleStyle):
- const idx = sel.selectedIndex;：获取当前下拉菜单选中项的索引（从0开始）。
- tables.forEach(table => table.hidden = (table.id !==t${idx}));：遍历所有表格。table.hidden是一个HTML属性，设置为true时元素会被隐藏。这里利用模板字符串将表格id（如t1, t2）与下拉菜单的索引关联起来，只有当表格id与当前选中索引匹配时，表格才会被显示（hidden为false），否则被隐藏。
-
实时刷新机制 (display_c):
- setTimeout(disp_TZ, 1000);：每隔1000毫秒（1秒）调用一次disp_TZ函数。setTimeout比setInterval在递归调用时更健壮，可以避免在浏览器标签页不活跃时累积延迟。
-
事件监听与初始状态:
- sel.addEventListener("change", disp_TZ);：当下拉菜单选择改变时，更新时间显示。
- sel.addEventListener("change", toggleStyle);：当下拉菜单选择改变时，切换相关表格的显示。
- toggleStyle();和disp_TZ();：在脚本加载后立即执行这两个函数，以设置页面的初始状态：隐藏所有表格并显示默认时区的时间。
注意事项与优化
- 代码组织与可读性: 采用const和箭头函数（=>）是现代JavaScript的良好实践，有助于提高代码的可读性和维护性。
- DOM加载时机: 将JavaScript代码放置在HTML内容的末尾（</body>标签之前），可以确保在脚本执行时DOM元素已经加载完成。如果脚本放在<head>中，则需要使用DOMContentLoaded事件监听器来确保DOM准备就绪。
- 避免重复代码 (DRY): 解决方案通过一个下拉菜单控制所有功能，并使用循环和事件监听器代替重复的onchange属性和函数调用，大大减少了代码量。
- 时区名称: 使用标准的IANA时区名称（如Asia/Manila, Canada/Eastern）是进行准确时区转换的关键。
- 用户体验: ct2的隐藏与否可以根据实际需求调整。如果用户更倾向于只看到一个完整的时间显示，可以移除ct2相关逻辑。
总结
通过本教程，我们学习了如何结合HTML、CSS和JavaScript，构建一个功能强大的时区选择器。它不仅能实时显示所选时区的当前时间，还能根据用户的选择动态展示或隐藏相关的地域信息表格。这种模式在需要根据用户输入动态更新内容和布局的Web应用中非常常见。通过理解和实践这些核心概念，您可以进一步扩展功能，例如添加更多时区、自定义时间显示格式，或者集成其他动态数据。
