在PHP与JavaScript中实现动态倒计时器：多卡片场景下的前端交互指南

<?php
// 示例：假设 $row 是从数据库查询结果中获取的一行数据
// $row[0] = ID, $row[1] = 序列号, $row[2] = 街道,
// $row[3] = 年, $row[4] = 月, $row[5] = 日,
// $row[6] = 时, $row[7] = 分, $row[8] = 秒

// 实际应用中，这里会有一个循环来遍历所有卡片数据
// foreach ($cards_data as $row) {
    // ... 在此处放置下面的代码 ...
// }
?>

<?php
// ... 假设 $row 变量已定义并包含当前卡片数据 ...

// 构造目标日期时间字符串，确保格式能被JavaScript的Date对象解析
// 推荐使用 'YYYY-MM-DD HH:MM:SS' 格式
$target_date_time_str = sprintf(
    "%s-%s-%s %s:%s:%s",
    $row[3], $row[4], $row[5], $row[6], $row[7], $row[8]
);

// 为每个倒计时创建一个唯一的HTML元素ID
$element_id = 'timer-' . $row[0]; // 例如：timer-1, timer-2

// 输出显示倒计时的HTML元素
echo '<p id="' . $element_id . '" style="font-size:18px;"></p>';

// 其他卡片内容
echo '<div class="card-body">';
echo '  <p class="card-text">' . $row[1] . '</p>'; // 序列号
echo '  <p class="card-text">' . $row[2] . '</p>'; // 街道
echo '</div>';
?>

<?php
// ... 承接上一步的 $target_date_time_str 和 $element_id ...
?>
<script type="text/javascript">
    // 使用 <?= ... ?> 短标签安全地输出PHP变量到JavaScript字符串
    var countDownDateStr = "<?= $target_date_time_str; ?>";
    var targetElementId = "<?= $element_id; ?>";

    // 将目标日期时间字符串转换为JavaScript Date对象的时间戳
    var countDownDate = new Date(countDownDateStr).getTime();

    // 为每个计时器创建一个独立的定时器变量
    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);

        // 获取对应的HTML元素并更新其内容
        var targetElement = document.getElementById(targetElementId);
        if (targetElement) { // 检查元素是否存在，避免错误
            if (distance < 0) {
                clearInterval(x); // 倒计时结束，清除定时器
                targetElement.innerHTML = "COMPLETO"; // 显示完成信息
            } else {
                targetElement.innerHTML = hours + "h " + minutes + "m " + seconds + "s ";
            }
        } else {
            // 如果元素不存在，也应清除定时器，避免内存泄漏
            clearInterval(x);
        }
    }, 1000); // 每秒更新一次
</script>

<?php
// 假设 $cards_data 是从数据库获取的所有卡片数据数组
// 实际应用中，请替换为你的数据库查询逻辑
$cards_data = [
    [1, 'SN001', 'Main St', '2024', '12', '25', '10', '00', '00'], // 示例数据1
    [2, 'SN002', 'Second Ave', '2024', '12', '31', '23', '59', '59'], // 示例数据2
    [3, 'SN003', 'Third Blvd', '2024', '11', '10', '08', '30', '00'], // 示例数据3 (可能已过期)
];

foreach ($cards_data as $row) {
    // 构造目标日期时间字符串
    $target_date_time_str = sprintf(
        "%s-%s-%s %s:%s:%s",
        $row[3], $row[4], $row[5], $row[6], $row[7], $row[8]
    );

    // 为每个倒计时创建一个唯一的HTML元素ID
    $element_id = 'timer-' . $row[0];
    ?>
    <div class="card">
        <div class="card-header">
            <!-- 输出显示倒计时的HTML元素 -->
            <p id="<?= $element_id; ?>" style="font-size:18px;"></p>
        </div>
        <div class="card-body">
            <p class="card-text">序列号: <?= $row[1]; ?></p>
            <p class="card-text">街道: <?= $row[2]; ?></p>
        </div>
    </div>

    <script type="text/javascript">
        var countDownDateStr_<?= $row[0]; ?> = "<?= $target_date_time_str; ?>";
        var targetElementId_<?= $row[0]; ?> = "<?= $element_id; ?>";

        var countDownDate_<?= $row[0]; ?> = new Date(countDownDateStr_<?= $row[0]; ?>).getTime();

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

            var targetElement = document.getElementById(targetElementId_<?= $row[0]; ?>);
            if (targetElement) {
                if (distance < 0) {
                    clearInterval(x_<?= $row[0]; ?>);
                    targetElement.innerHTML = "COMPLETO";
                } else {
                    targetElement.innerHTML = hours + "h " + minutes + "m " + seconds + "s ";
                }
            } else {
                clearInterval(x_<?= $row[0]; ?>);
            }
        }, 1000);
    </script>
    <?php
}
?>