构建动态倒计时：PHP与JavaScript集成实现多卡片计时器

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

// 构造完整的日期时间字符串，格式如 "YYYY-MM-DD HH:MM:SS"
$targetDateStr = $row[3] . "-" . $row[4] . "-" . $row[5] . " " . $row[6] . ":" . $row[7] . ":" . $row[8];

// 为了调试或显示，可以先输出目标日期时间
// echo $targetDateStr;
?>

<?php
// ... 上面的PHP代码 ...

// 创建一个用于显示倒计时的HTML元素
// 注意：id属性的值必须是唯一的，这里使用 $row[0] (卡片ID) 作为其值
echo '<p id="' . $row[0] . '" style="font-size:18px; font-weight: bold;"></p>';

// 其他卡片信息，例如序列号和街道
echo '<p class="card-text">' . $row[1] . '</p>';
echo '<p class="card-text">' . $row[2] . '</p>';
?>

<script type="text/javascript">
    // 从PHP获取目标日期时间字符串，并转换为JavaScript Date对象
    // 注意：这里使用 '<?php echo $targetDateStr; ?>' 将PHP变量值嵌入到JavaScript字符串中
    var countDownDateStr = "<?php echo $targetDateStr; ?>";
    var countDownDate = new Date(countDownDateStr).getTime();

    // 从PHP获取当前计时器对应的HTML元素ID
    // 注意：这里使用 '<?= $row[0]; ?>' 将PHP变量值嵌入到JavaScript字符串中
    var timerElementId = '<?= $row[0]; ?>';

    // 每秒更新一次计时器
    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元素
        // 注意：document.getElementById() 的参数必须是字符串形式的ID
        document.getElementById(timerElementId).innerHTML = hours + "h " + minutes + "m " + seconds + "s ";

        // 如果倒计时结束
        if (distance < 0) {
            clearInterval(x); // 停止计时器
            document.getElementById(timerElementId).innerHTML = "已完成"; // 显示完成信息
        }
    }, 1000); // 每1000毫秒（1秒）执行一次
</script>

<?php
// 假设 $dbRows 是从数据库查询到的所有卡片数据数组
// 伪代码：$dbRows = $pdo->query("SELECT ID, serial_number, street, year, month, day, hour, minutes, seconds FROM cards")->fetchAll();

foreach ($dbRows as $row) {
    // 1. PHP数据准备
    $targetDateStr = $row[3] . "-" . $row[4] . "-" . $row[5] . " " . $row[6] . ":" . $row[7] . ":" . $row[8];
    ?>
    <div class="card">
        <div class="card-header">
            <!-- 2. HTML结构与唯一ID -->
            <?php echo '<p id="' . $row[0] . '" style="font-size:18px; font-weight: bold;"></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>
        <!-- 3. JavaScript倒计时逻辑与PHP变量集成 -->
        <script type="text/javascript">
            var countDownDateStr_<?= $row[0]; ?> = "<?php echo $targetDateStr; ?>";
            var countDownDate_<?= $row[0]; ?> = new Date(countDownDateStr_<?= $row[0]; ?>).getTime();
            var timerElementId_<?= $row[0]; ?> = '<?= $row[0]; ?>';

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

                // 更新当前卡片的计时器显示
                document.getElementById(timerElementId_<?= $row[0]; ?>).innerHTML = hours + "h " + minutes + "m " + seconds + "s ";

                if (distance < 0) {
                    clearInterval(x_<?= $row[0]; ?>);
                    document.getElementById(timerElementId_<?= $row[0]; ?>).innerHTML = "已完成";
                }
            }, 1000);
        </script>
    </div>
    <?php
}
?>