基于IP地址时区的2023新年倒计时不同步问题求助

问题根源 #

1. PHP代码错误：误用了非PHP原生的Date类，PHP日期处理应使用DateTime类，原代码未正确基于IP时区计算UTC时间戳
2. 前端JS完全依赖设备本地时区计算倒计时，未使用IP对应的时区截止时间

修正后的完整代码 #

1. 修改index_test.php代码

<?php
// 获取用户IP地址
$ip = $_SERVER['REMOTE_ADDR'];

// 通过ip-api.com获取时区信息
$ipInfo = file_get_contents('http://ip-api.com/json/' . $ip);
$ipInfo = json_decode($ipInfo);
$timezone = $ipInfo->timezone ?? 'UTC'; // 兜底默认UTC

// 基于IP时区创建2023年元旦的DateTime对象
$deadline = new DateTime('2023-01-01 00:00:00', new DateTimeZone($timezone));
// 转换为UTC毫秒级时间戳（和JS的Date.now()格式统一）
$deadlineTimestamp = $deadline->getTimestamp() * 1000;

// 获取当前UTC时间戳（毫秒级）
$currentTimestamp = (new DateTime('now', new DateTimeZone('UTC')))->getTimestamp() * 1000;

// 计算剩余时间
$timeLeft = $deadlineTimestamp - $currentTimestamp;

$days = floor($timeLeft / (1000 * 60 * 60 * 24));
$hours = floor(($timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
$minutes = floor(($timeLeft % (1000 * 60 * 60)) / (1000 * 60));
$seconds = floor(($timeLeft % (1000 * 60)) / 1000);

// 若已过截止时间可自行处理（如更新页面内容）
if ($currentTimestamp >= $deadlineTimestamp) {
    // 可替换为自定义逻辑，避免外链跳转
    $days = $hours = $minutes = $seconds = 0;
}
?>

2. 修改HTML代码，传递截止时间戳到前端

<div class="text-center">
    <h2>COUNTDOWN TO 2023.</h2>
    <div class="time-cards">
        <div class="time-card">
            <h4 class='time' id='days'><?php echo $days; ?></h4>
            <p class="time-display">Days</p>
        </div>
        <div class="time-card">
            <h4 class='time' id='hours'><?php echo $hours; ?></h4>
            <p class="time-display">Hours</p>
        </div>
        <div class="time-card">
            <h4 class='time' id='minutes'><?php echo $minutes; ?></h4>
            <p class="time-display">Minutes</p>
        </div>
        <div class="time-card">
            <h4 class='time' id='seconds'><?php echo $seconds; ?></h4>
            <p class="time-display">Seconds</p>
        </div>
    </div>
</div>
<!-- 传递服务器计算的截止时间戳给JS -->
<script>
const DEADLINE_TIMESTAMP = <?php echo $deadlineTimestamp; ?>;
</script>
<script src="scripts.js"></script>

3. 修改scripts.js代码，使用服务器传递的截止时间戳

const seconds = document.getElementById('seconds');
const minutes = document.getElementById('minutes');
const hours = document.getElementById('hours');
const days = document.getElementById('days');

let countdownInterval;

function countDown () {
    const currentTimestamp = Date.now(); // 获取当前UTC时间戳（毫秒级）
    let timeLeft = DEADLINE_TIMESTAMP - currentTimestamp;

    // 处理已过期的情况
    if (timeLeft < 0) {
        clearInterval(countdownInterval);
        days.textContent = '0';
        hours.textContent = '0';
        minutes.textContent = '0';
        seconds.textContent = '0';
        return;
    }

    const daysValue = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
    const hoursValue = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutesValue = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
    const secondsValue = Math.floor((timeLeft % (1000 * 60)) / 1000);

    // 补零优化显示效果
    seconds.textContent = secondsValue.toString().padStart(2, '0');
    minutes.textContent = minutesValue.toString().padStart(2, '0');
    hours.textContent = hoursValue.toString().padStart(2, '0');
    days.textContent = daysValue.toString().padStart(2, '0');
}

// 初始化立即执行，避免页面加载延迟
countDown();
countdownInterval = setInterval(countDown, 1000);

关键修改说明 #

1. PHP部分：

   • 使用PHP原生DateTime类处理时区和日期，确保基于IP时区计算2023元旦的准确时间
   • 将截止时间转换为UTC毫秒级时间戳，和JS的时间戳格式统一
   • 添加时区兜底逻辑，避免IP接口返回异常导致报错

2. 前端部分：

   • 通过PHP输出全局变量传递截止时间戳，确保JS使用IP时区对应的截止时间，而非设备本地时区
   • 优化倒计时逻辑，处理时间过期场景，添加补零显示提升美观度
   • 初始化立即执行倒计时函数，避免页面加载后延迟1秒才显示正确数值

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