如何在php中显示多个倒计时计时器

How to display multiple Countdown timer in php

本文关键字：倒计时 计时器 显示 php      更新时间：2023-09-26

首先，我从数据库中选择所有数据时间，但当显示到页面时，只有前一个项目会显示计时器，其他项目不能显示计时器。

 <?php
     $stmtAuction = $db->prepare("SELECT * FROM auction WHERE expired_at >= CURDATE() AND status = 'available' ORDER BY expired_at ASC");
                    $stmtAuction->execute();
     if ($stmtAuction->rowCount() > 0) {
                        while ($item = $stmtAuction->fetch()) {
       ?>
          <span id='countdown' value='<?php echo $item['expired_at'];?>'></span>       
<?php
}
?>
    <script>
     $("#countdown").countdown($('#countdown').attr('value'), function(event) {
                $(this).text(
                    event.strftime('%D days %H:%M:%S')
                );
            });
    </script>

如何显示每个项目的计时器？？

您的问题是由不唯一的id s引起的。您的$stmtAuction->rowCount()编号为id='countdown'。id应该是唯一的。因此javascript/jQuery将只找到第一个/唯一的id='countdown'。您需要使用class='countdown'而不是

<?php
    $stmtAuction = $db->prepare("SELECT * FROM auction WHERE expired_at >= CURDATE() AND status = 'available' ORDER BY expired_at ASC");
    $stmtAuction->execute();
    if ($stmtAuction->rowCount() > 0) {
        while ($item = $stmtAuction->fetch()) {
        ?>
            <span class='countdown' value='<?php echo $item['expired_at'];?>'></span>
                  ^^^^^-change from id to class
<?php
        }
    }
    ?>

现在，在javascript中，您需要使用类选择器$(".countdown")，并使用$.each()在每个类上循环。

<script>
    $('.countdown').each(function(){
        $(this).countdown($(this).attr('value'), function(event) {
            $(this).text(
                event.strftime('%D days %H:%M:%S')
            );
        });
    });
</script>

jsFiddle示例-https://jsfiddle.net/smh5nhgz/1/

相关文章：