本教程将指导您如何使用html、css和javascript构建一个交互式网页，实现通过下拉菜单选择不同时区，并实时显示该时区的当前时间。同时，页面将根据选择动态展示或隐藏与该时区相关的详细信息表格，确保用户界面的响应性和信息的直观呈现。
在现代Web应用中，为用户提供个性化的时间显示和相关信息是常见的需求。本教程将详细介绍如何通过一个简洁的下拉菜单，不仅能实时更新所选时区的当前时间，还能动态切换显示与该时区相关的详细地域信息表格。我们将利用HTML构建页面结构，CSS进行样式美化，并运用JavaScript实现核心的动态交互逻辑。
核心功能实现
为了实现上述功能，我们需要精心设计HTML结构、应用CSS样式，并编写JavaScript逻辑来处理用户交互和时间更新。
HTML 结构
页面的HTML结构主要包含用于显示时间的元素、一个用于选择时区的下拉菜单，以及一系列根据时区选择而显示/隐藏的元素。
Select Timezone above
立即学习“Java免费学习笔记（深入）”；
| Country | Capital |
|---|---|
| Philippines | Manila |
| Province/Territory | Time Zone | Capital | Other Cities |
|---|---|---|---|
| Ontario | Eastern | Toronto | Ottawa, Mississauga, Hamilton, Kitchener, London, Oshawa, Windsor, Barrie, Guelph, Kingston, Sudbury, Thunder Bay, Etobicoke |
| Quebec | Eastern | Quebec City | Montreal, Sherbrooke, Trois-Rivières, Chicoutimi, Châteauguay, Granby |
| Nunavut | Eastern | Iqaluit | Cambridge Bay, Rankin Inlet |
| Province/Territory | Time Zone | Capital | Other Cities |
|---|---|---|---|
| Nova Scotia | Atlantic | Halifax | Cape Breton, Sydney, Truro, Dartmouth |
| New Brunswick | Atlantic | Fredericton | Moncton, Saint John, Fredericton |
| Prince Edward Island | Atlantic | Charlottetown | Summerside, Stratford |
| Province/Territory | Time Zone | Capital | Other Cities |
|---|---|---|---|
| Manitoba | Central | Winnipeg | Brandon, Churchill, Steinbach, Winkler, Portage La Prairie, Thompson |
| Province/Territory | Time Zone | Capital | Other Cities |
|---|---|---|---|
| British Columbia | Pacific | Victoria | Vancouver, Surrey, Burnaby, Richmond, Abbotsford, Coquitlam, Kelowna, Nanaimo, Kamloops |
| Yukon | Pacific | Whitehorse | Cambridge Bay, Rankin Inlet |
| Province/Territory | Time Zone | Capital | Other Cities |
|---|---|---|---|
| Saskatchewan | Mountain | Regina | Saskatoon, Moose Jaw, Swift Current, Yorkton |
| Alberta | Mountain | Edmonton | Calgary, Red Deer, Lethbridge, Airdrie, Medicine Hat, Grande Prairie, Banff |
| Northwest Territories | Mountain | Yellowknife | Inuvik |
| Province/Territory | Time Zone | Capital | Other Cities |
|---|---|---|---|
| Newfoundland and Labrador | Newfoundland | St. John's | Corner Brook, Grand Falls-Windsor, Gander |
在上述HTML中：
id=”ct”和id=”ct2″用于显示实时时间。ct显示包含日期、时间、时区缩写和全名的详细信息，而ct2则显示简化的时分秒。是核心的下拉菜单，用户通过它选择不同的时区。一系列元素（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 + " ,
" + 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(…)循环遍历数组，为每个时区创建一个元素并添加到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内容的末尾（
以上就是JavaScript实现下拉选择时区并实时显示时间及相关信息的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538182.html
微信扫一扫 
支付宝扫一扫 
