如何在单个HTML页面展示不同时区（PDT、IST、JST、AEST）的日期
2026-5-26
轻松实现多时区日期显示
嘿，别担心！我帮你写了一个超简单的HTML+JavaScript示例，完全不用复杂的JS知识，用浏览器原生的API就能搞定PDT、IST、JST和AEST这四个时区的日期显示，而且还能实时更新哦～
下面是完整的代码，我加了详细的注释，你一看就懂：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多时区日期显示</title> <style> /* 简单加点样式让页面好看点 */ .timezone-card { border: 1px solid #ddd; padding: 15px; margin: 10px; border-radius: 8px; width: 200px; display: inline-block; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .timezone-title { font-weight: bold; font-size: 1.2em; margin-bottom: 10px; color: #2c3e50; } .timezone-date { font-size: 1.1em; color: #34495e; } </style> </head> <body> <h1>全球时区日期显示</h1> <!-- 四个时区的显示容器 --> <div class="timezone-card"> <div class="timezone-title">PDT (太平洋夏令时)</div> <div id="pdt-date" class="timezone-date"></div> </div> <div class="timezone-card"> <div class="timezone-title">IST (印度标准时间)</div> <div id="ist-date" class="timezone-date"></div> </div> <div class="timezone-card"> <div class="timezone-title">JST (日本标准时间)</div> <div id="jst-date" class="timezone-date"></div> </div> <div class="timezone-card"> <div class="timezone-title">AEST (澳大利亚东部标准时间)</div> <div id="aest-date" class="timezone-date"></div> </div> <script> // 定义要显示的时区信息，key是容器ID，value是时区标识符和名称 const timezones = { 'pdt-date': { zone: 'America/Los_Angeles', name: 'PDT' }, 'ist-date': { zone: 'Asia/Kolkata', name: 'IST' }, 'jst-date': { zone: 'Asia/Tokyo', name: 'JST' }, 'aest-date': { zone: 'Australia/Sydney', name: 'AEST' } }; // 日期显示的格式配置，可以根据自己的需求修改 const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true }; // 更新所有时区日期的函数 function updateTimezones() { // 遍历每个时区 Object.keys(timezones).forEach(id => { const timezone = timezones[id]; // 创建当前时间的Date对象 const now = new Date(); // 使用Intl.DateTimeFormat格式化对应时区的日期 const formattedDate = new Intl.DateTimeFormat('en-US', { ...dateOptions, timeZone: timezone.zone }).format(now); // 将格式化后的日期插入到对应的容器中 document.getElementById(id).textContent = formattedDate; }); } // 页面加载时先更新一次 updateTimezones(); // 每秒钟更新一次，保持时间实时 setInterval(updateTimezones, 1000); </script> </body> </html>
代码说明：
- 时区标识符：我用了标准的IANA时区标识符，比如
America/Los_Angeles会自动识别PDT（夏令时）和PST（冬令时），不用手动切换； - 日期格式：
dateOptions里的参数可以随便改，比如不想显示秒就去掉second: '2-digit'，想改成24小时制就把hour12: true改成false； - 样式部分：加了点简单的CSS让页面更整洁，你可以根据自己的喜好调整颜色、布局；
- 实时更新：用
setInterval每秒更新一次时间，要是不需要实时，把这行删掉就行。
你只要把这段代码复制到一个.html文件里，用浏览器打开就能看到效果啦，完全不需要额外安装任何东西～
内容的提问来源于stack exchange，提问作者Srikanth Anamarlapudi
