静态网站用JavaScript实时显示英国时区时间及加载优化问询

需求概述 #

将现有JavaScript脚本修改为始终显示英国时区的实时时间（自动适配GMT/BST夏令时），同时解决页面加载时时间"突然出现"的空白问题，站点为无数据库的静态网站，保留原脚本中已注释的月份相关代码逻辑（按需启用）。

修改后的完整代码 #

JavaScript 代码

// 初始化立即执行，避免加载时空白
showDateTime();
// 每秒更新一次时间
setInterval(showDateTime, 1000);

function showDateTime() {
    const currentDate = document.getElementById("date");
    const currentTime = document.getElementById("time");
    
    // 创建英国时区的日期对象，自动处理夏令时切换
    const ukDate = new Date().toLocaleString("en-GB", { timeZone: "Europe/London" });
    const dateObj = new Date(ukDate);
    
    const dayList = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    const dayName = dayList[dateObj.getDay()];
    
    // 若需要显示月份，取消以下注释并调整today变量
    /* const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    const monthName = monthNames[dateObj.getMonth()];
    const today = `${dayName} ${dateObj.getDate()} ${monthName}`;
    currentDate.textContent = today; */
    
    // 仅显示星期几
    currentDate.textContent = dayName;
    
    // 格式化时分秒为两位数字
    const hour = String(dateObj.getHours()).padStart(2, '0');
    const min = String(dateObj.getMinutes()).padStart(2, '0');
    const sec = String(dateObj.getSeconds()).padStart(2, '0');
    
    const time = `${hour}:${min}:${sec}`;
    currentTime.textContent = time;
}

HTML 代码

<p><span id="date" class="os-menu__item">Loading...</span> <span id="time">--:--:--</span> GMT</p>

核心优化点说明 #

1. 英国时区精准适配
   使用toLocaleString指定Europe/London时区，JavaScript会自动根据英国夏令时规则切换GMT/BST，无需手动维护时区偏移量。

2. 解决加载空白问题

   • 脚本启动时立即执行showDateTime()，避免用户等待1秒才看到时间；
   • HTML中给时间元素设置初始占位文本，加载完成前不会出现空白区域，提升用户体验。

3. 代码可读性与性能优化

   • 用padStart(2, '0')替代原有的字符串拼接截取逻辑，代码更简洁直观；
   • 使用textContent替代innerText，减少浏览器样式解析的额外开销，性能更优。

4. 保留月份扩展能力
   原脚本中注释的月份显示代码已保留，取消注释后即可显示完整日期格式（如Wed 15 Oct）。

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