动态网页中PHP与JavaScript协同实现独立倒计时功能

// 假设 $row[0] 包含数据库记录的唯一ID
echo '<p id="' . $row[0] . '" style="font-size:18px;"></p>';
// 或者使用更简洁的语法 (PHP 5.4+)
// echo '<p id="<?= $row[0] ?>" style="font-size:18px;"></p>';

<?php
$date = $row[3] . "-" . $row[4] . "-" . $row[5]; // 例如 "2023-12-25"
$time = $row[6] . ":" . $row[7] . ":" . $row[8]; // 例如 "10:30:00"
$date_today = $date . ' ' . $time; // 例如 "2023-12-25 10:30:00"
?>
<script type="text/javascript">
    // 将PHP生成的日期时间字符串传递给JavaScript变量
    var countDownDateString = "<?php echo $date_today; ?>";
    var countDownDate = new Date(countDownDateString).getTime();
    // ... 后续JavaScript代码
</script>

var x = setInterval(function() {
    var now = new Date().getTime(); // 获取当前时间戳
    var distance = countDownDate - now; // 计算时间差

    // 计算小时、分钟、秒
    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);

    // 关键修正：使用正确的ID引用更新HTML元素
    document.getElementById('<?= $row[0]; ?>').innerHTML = hours + "h " + minutes + "m " + seconds + "s ";

    // 倒计时结束处理
    if (distance < 0) {
        clearInterval(x); // 清除定时器
        document.getElementById('<?= $row[0]; ?>').innerHTML = "COMPLETO"; // 显示完成信息
    }
}, 1000); // 每秒执行一次

<?php
// 假设 $rows 是从数据库查询出的结果集数组
// 遍历每条记录，为每条记录生成一个卡片和倒计时
foreach ($rows as $row) {
    // 构建目标日期时间字符串
    $date = $row[3] . "-" . $row[4] . "-" . $row[5]; // 年-月-日
    $time = $row[6] . ":" . $row[7] . ":" . $row[8]; // 时:分:秒
    $targetDateTime = $date . ' ' . $time;
?>
    <div class="card">
        <div class="card-header">
            <!-- 显示目标日期时间 -->
            <?php echo $targetDateTime; ?>
            <!-- 倒计时显示区域，ID使用$row[0]确保唯一性 -->
            <p id="<?php echo $row[0]; ?>" style="font-size:18px;"></p>
        </div>
        <div class="card-body">
            <p class="card-text">序列号: <?php echo $row[1]; ?></p>
            <p class="card-text">街道: <?php echo $row[2]; ?></p>
        </div>
    </div>

    <script type="text/javascript">
        // 将PHP生成的日期时间字符串传递给JavaScript
        var countDownDateString_<?= $row[0]; ?> = "<?php echo $targetDateTime; ?>";
        var countDownDate_<?= $row[0]; ?> = new Date(countDownDateString_<?= $row[0]; ?>).getTime();

        // 为每个计时器创建独立的setInterval实例
        var x_<?= $row[0]; ?> = setInterval(function() {
            var now = new Date().getTime();
            var distance = countDownDate_<?= $row[0]; ?> - now;

            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);

            // 更新对应ID的HTML元素
            document.getElementById('<?= $row[0]; ?>').innerHTML = hours + "h " + minutes + "m " + seconds + "s ";

            if (distance < 0) {
                clearInterval(x_<?= $row[0]; ?>);
                document.getElementById('<?= $row[0]; ?>').innerHTML = "COMPLETO";
            }
        }, 1000);
    </script>
<?php
} // 结束 foreach 循环
?>