如何实现基于管理员时区的跨时区倒计时功能？

核心需求 #

管理员在自身本地时区输入目标倒计时时间，所有不同时区的网站访客看到的倒计时时长完全一致，不受访客本地时区影响。例如：

• 管理员在伦敦输入2023-06-01 13:00:00（伦敦时区）
• 伦敦访客在本地时间2023-06-01 12:00:00访问时显示1小时倒计时，旧金山访客此时也会显示相同的1小时倒计时

问题根源 #

你当前的代码中，new Date('2023-06-28 10:00:00').getTime()会根据访客的本地时区解析时间字符串，导致不同时区的浏览器生成的时间戳不一致，最终倒计时时长出现偏差。

最优解决方案：PHP端转换为Unix时间戳 #

最稳妥且兼容性最好的方式是在PHP后台将管理员输入的本地时间转换为Unix时间戳，直接传递给JavaScript使用。因为Unix时间戳是基于UTC的绝对时间，所有时区的浏览器处理时都会指向同一个时间点。

步骤1：PHP后台处理时间 #

管理员输入的时间和对应的时区（可后台预设或让管理员选择），通过PHP的DateTime类转换为Unix时间戳：

// 管理员输入的本地时间
$admin_local_time = "2023-06-01 13:00:00";
// 管理员所在的时区（示例为伦敦时区，可后台配置或让管理员选择）
$admin_timezone = new DateTimeZone("Europe/London");

// 创建带时区的DateTime对象
$target_datetime = new DateTime($admin_local_time, $admin_timezone);
// 转换为Unix时间戳（秒级）
$target_timestamp = $target_datetime->getTimestamp();

步骤2：修改JavaScript代码 #

将PHP生成的时间戳传递给JS，注意JS的时间戳是毫秒级，需要乘以1000：

<div id="countdown"></div>
<script>
  function countdown() {
    var countdown = document.getElementById('countdown');
    // 直接使用PHP传递的Unix时间戳（转毫秒级）
    var countdownDate = <?php echo $target_timestamp; ?> * 1000;

    var x = setInterval(function() {
      var now = new Date().getTime();
      var distance = countdownDate - now;

      if (distance < 0) {
        clearInterval(x);
        countdown.remove();
      } else {
        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);

        var countdownText = `${days} days ${hours} hours ${minutes} mins ${seconds} secs`;
        countdown.innerHTML = countdownText;
      }
    }, 1000);
  }

  countdown();
</script>

备选方案：JS端基于时区解析时间 #

如果需要在JS端处理时区，可以让管理员输入对应的时区标识符（如Europe/London），然后使用成熟的日期库（如moment-timezone）解析时间，避免手动处理偏移出错：

<div id="countdown"></div>
<script src="https://cdn.jsdelivr.net/npm/moment-timezone@0.5.43/builds/moment-timezone-with-data.min.js"></script>
<script>
  function countdown() {
    var countdown = document.getElementById('countdown');
    // 管理员输入的时间和对应的时区
    var adminInputTime = "2023-06-01 13:00:00";
    var adminTimezone = "Europe/London";

    // 使用moment-timezone解析为毫秒级时间戳
    var countdownDate = moment.tz(adminInputTime, adminTimezone).valueOf();

    var x = setInterval(function() {
      var now = new Date().getTime();
      var distance = countdownDate - now;

      if (distance < 0) {
        clearInterval(x);
        countdown.remove();
      } else {
        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);

        var countdownText = `${days} days ${hours} hours ${minutes} mins ${seconds} secs`;
        countdown.innerHTML = countdownText;
      }
    }, 1000);
  }

  countdown();
</script>

注意：备选方案会增加前端代码体积，且依赖第三方库，优先推荐PHP端转换时间戳的方案。

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