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

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是实现所有动态行为的核心。它负责填充下拉菜单、实时更新时间、以及根据用户选择切换表格的显示状态。

传媒公司模板(RTCMS)1.0

传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://

下载

// 隐藏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 逻辑详解：

1. 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开头的表格元素，方便统一管理。

2. 动态填充下拉菜单:

   • my_timezones数组定义了所有可供选择的时区。
   • my_timezones.forEach(...)循环遍历数组，为每个时区创建一个元素并添加到sel下拉菜单中。

3. 实时时间显示函数 (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()，确保时间持续刷新。

4. 内容切换函数 (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），否则被隐藏。

5. 实时刷新机制 (display_c):

   • setTimeout(disp_TZ, 1000);：每隔1000毫秒（1秒）调用一次disp_TZ函数。setTimeout比setInterval在递归调用时更健壮，可以避免在浏览器标签页不活跃时累积延迟。

6. 事件监听与初始状态:

   • sel.addEventListener("change", disp_TZ);：当下拉菜单选择改变时，更新时间显示。
   • sel.addEventListener("change", toggleStyle);：当下拉菜单选择改变时，切换相关表格的显示。
   • toggleStyle();和disp_TZ();：在脚本加载后立即执行这两个函数，以设置页面的初始状态：隐藏所有表格并显示默认时区的时间。

注意事项与优化

• 代码组织与可读性: 采用const和箭头函数（=>）是现代JavaScript的良好实践，有助于提高代码的可读性和维护性。
• DOM加载时机: 将JavaScript代码放置在HTML内容的末尾（