新手请教：如何实现跨时区同步的Countdown Timer？

你的原代码存在核心问题：用new Date("Jan 1, 2023 15:37:25")设置截止时间时，浏览器会将该字符串解析为用户本地时区的时间，不同时区用户看到的截止时间不一致，导致倒计时无法同步。

要实现跨时区同步，核心是让所有用户的浏览器基于全球统一的时间标准计算倒计时，以下是两种适合新手的简单方案：

方案一：用UTC时间设置截止点 #

多伦多（EST非夏令时）上午11点对应UTC时间为当天16点（EST为UTC-5）。使用Date.UTC()方法直接生成UTC时间戳，该时间戳全球统一，不受用户本地时区影响。

修改后的完整代码：

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #demo {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    p {
      text-align: center;
      font-size: 60px;
      margin-top: 0px;
      margin-bottom: 10px;
    }
    .txt_DAYS, .txt_HRS, .txt_MINS, .txt_SECS {
      font-size: 20px;
    }
    #Msg {
      width: 100%;
      font-size: 40px;
      color: red;
    }
  </style>
</head>
<body>
  <div id="demo">
    <div>
      <p class="DAYS" id="days">00</p>
      <p class="txt_DAYS">DAY</p>
    </div>
    <div>
      <p class="HRS" id="hours">00</p>
      <p class="txt_HRS">HRS</p>
    </div>
    <div>
      <p class="MINS" id="minutes">00</p>
      <p class="txt_MINS">MIN</p>
    </div>
    <div>
      <p class="SECS" id="seconds">00</p>
      <p class="txt_SECS">SEC</p>
    </div>
    <p class="TEXT" id="Msg"></p>
  </div>

  <script>
    // Date.UTC参数：年, 月(0=1月), 日, 时, 分, 秒
    // 对应多伦多时间2023年1月1日上午11点（EST，UTC-5）的UTC时间是16点
    var countDownDate = Date.UTC(2023, 0, 1, 16, 0, 0);

    // 每秒更新一次倒计时（原100毫秒间隔没必要，1秒足够）
    var x = setInterval(function() {
      var now = new Date().getTime();
      var distance = countDownDate - now;

      // 计算剩余时间
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      // 补零显示，替代原三元表达式更简洁
      document.getElementById("days").innerHTML = days.toString().padStart(2, '0');
      document.getElementById("hours").innerHTML = hours.toString().padStart(2, '0');
      document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, '0');
      document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, '0');

      // 倒计时结束处理
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("days").innerHTML = "00";
        document.getElementById("hours").innerHTML = "00";
        document.getElementById("minutes").innerHTML = "00";
        document.getElementById("seconds").innerHTML = "00";
        document.getElementById("Msg").innerHTML = "EXPIRED";
      }
    }, 1000);
  </script>
</body>
</html>

方案二：用带时区标识的ISO日期字符串 #

无需手动转换UTC时间，直接用ISO格式字符串明确指定活动时区。比如多伦多时间上午11点可写成2023-01-01T11:00:00-05:00（-05:00代表UTC-5，即EST时区），浏览器会自动解析为统一的UTC时间戳。

只需替换代码中的countDownDate：

var countDownDate = new Date("2023-01-01T11:00:00-05:00").getTime();

额外修正说明 #

• 修复原代码中seconds的innerHTML错误使用hours的问题
• 用padStart(2, '0')简化补零逻辑
• 将更新间隔从100毫秒改为1000毫秒，减少不必要的性能消耗
• 调整CSS布局，让倒计时元素排列更规整

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